Flex: Aligning align a button to the right and content to the left

Question

I started with this SO answer and I was trying to use the pure flexbox answer that was provided.

However I see the following result when I try this.

I am not sure why Button 4 is appearing higher on the row then the rest of the elements.

HTML

  <div class="customFlexContainer">
    <div>
      <mat-form-field>
        <mat-label>Search</mat-label>
        <input matInput placeholder="Search" #searchString />
      </mat-form-field>


      <button color="primary" mat-button >Button 1</button>
      <button color="primary" mat-button (click)="doSomething()">Button 2</button>
      <button color="primary" mat-button (click)="doSomething()">Button 3</button>
    </div>
    <div>
      <button mat-button color="primary" (click)="do2()">Button 4</button>
    </div>

  </div>

CSS

.customFlexContainer {
  display: flex;
  justify-content: space-between;
  height: 0%;
  align-content: center;
}

button {
  margin: 5px;  
}

Result:

EDIT:

In my style.css the following line appears to possibly be causing the issue.

@import "~@angular/material/prebuilt-themes/deeppurple-amber.css";*

If I comment it out it aligns correctly, but the page is not styled at all.

because that is what `space-between` supposed to do, it treats the 2 divs inside the flex containers as its child and assign space between them pushing them to both ends. — Jismon Thomas, Aug 08 '18 at 17:00
can you post your actual css, because your current css seems to be working if i just remove justify-content and there is no extra space for the last item — Jismon Thomas, Aug 08 '18 at 17:25
I'll keep digging but that is the css for that component. It must be picking up another setting where I'm not expecting it. — PrivateJoker, Aug 08 '18 at 17:32
@import "~@angular/material/prebuilt-themes/deeppurple-amber.css";* There appears to be some conflict with this... — PrivateJoker, Aug 08 '18 at 17:48

score 2 · Answer 1 · answered Aug 09 '18 at 04:07

Can you try something like this:

.customFlexContainer {
  display: flex;
  justify-content: space-between;
  height: 0%;
  align-items: center;
}

button {
  margin: 5px;
}

<div class="customFlexContainer">
  <div>
    <mat-form-field>
      <mat-label>Search</mat-label>
      <input matInput placeholder="Search" #searchString />
    </mat-form-field>


    <button color="primary" mat-button>Button 1</button>
    <button color="primary" mat-button (click)="doSomething()">Button 2</button>
    <button color="primary" mat-button (click)="doSomething()">Button 3</button>
  </div>
  <div>
    <button mat-button color="primary" (click)="do2()">Button 4</button>
  </div>

</div>

You need to use align-items: center and not align-content.

Closer but still doesn't work. As I said this works without the angular pre-defined themes but my solution I am utilizing the themes. — PrivateJoker, Aug 09 '18 at 11:43
Can you create code sandbox for this? I don't think theme should create this problem — Sandip Nirmal, Aug 09 '18 at 12:21

score 0 · Answer 2 · answered Aug 08 '18 at 16:56

B'coz you use display: flex;

You should be use this simple way add max-width: 537px; into .customFlexContainer class

Hope this help. Let me know further clarification.

    .customFlexContainer {
  display: flex;
  justify-content: space-between;
  height: 0%;
  align-content: center;
      max-width: 537px;
}

button {
  margin: 5px;  
}

  <div class="customFlexContainer">
    <div>
      <mat-form-field>
        <mat-label>Search</mat-label>
        <input matInput placeholder="Search" #searchString />
      </mat-form-field>


      <button color="primary" mat-button >Button 1</button>
      <button color="primary" mat-button (click)="doSomething()">Button 2</button>
      <button color="primary" mat-button (click)="doSomething()">Button 3</button>
    </div>
    <div>
      <button mat-button color="primary" (click)="do2()">Button 4</button>
    </div>

  </div>

That did not work , it just pulled the button 4 to the left more but it is still raised. That being said I do want button 4 all the way to the left, I;m just not sure why it's not the same horizontally. — PrivateJoker, Aug 08 '18 at 17:05
It does not work when utilizing the angular material pre defined themes. — PrivateJoker, Aug 08 '18 at 18:58

score 0 · Accepted Answer · answered Aug 09 '18 at 19:26

I was able to resolve the issue by doing the following:

  <div class="customFlexContainerNoSpace">
    <div>
      <mat-form-field>
        <mat-label>Search</mat-label>
        <input matInput placeholder="Search" #searchString />
      </mat-form-field>
    </div>
    <div class="customFlexContainer flexGrow3">
      <div>
        <button color="primary" mat-button #searchButton>Button 1</button>
        <button color="primary" mat-button>Button 2</button>
        <button color="primary" mat-button>Button 3</button>
      </div>
      <div>
        <button class="goRight" mat-button color="primary">Button 4</button>
      </div>
    </div>
  </div>

CSS

.customFlexContainer {
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  height: 0%;
  align-items: center;  
}

.customFlexContainerNoSpace {
  display: flex;  
  height: 0%;
  align-items: center;
}

.flexGrow3 {
  flex-grow: 3;
}

button {
  margin-left: 5px;  
}

.goRight {
  align-self: flex-end;
}

Flex: Aligning align a button to the right and content to the left

3 Answers3