How to use different align on same row with CSS flexbox?

Question

How to use different align on same row with CSS flex?

I have this:

.buttons-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

<div class="buttons-container">
  <button mat-raised-button>A</button>
  <button mat-raised-button>B</button>
  <button mat-raised-button>C</button>
</div>

My result is:

                                 | (center)
+---------------------------------------------------------------------+
|                              A B C                                  |
+---------------------------------------------------------------------+
                                 | (center)

But I need align C to right:

                                 | (center)
+---------------------------------------------------------------------+
|                               A B                                 C |
+---------------------------------------------------------------------+
                                 | (center)

IS IT IMPORTANT TO KEEP div and button

I try other code but KO

.buttons-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.buttons-container>button:last-child {
  flex: 1;
  justify-self: end;
}

<div class="buttons-container">
  <button mat-raised-button>A</button>
  <button mat-raised-button>B</button>
  <button mat-raised-button>C</button>
</div>

none of the proposed solution on Center and right align flexbox elements does work with buttons in a div

.buttons-container div::before {
  content:"D";
  margin: 1px auto 1px 1px;
  visibility: hidden;
  padding: 5px;
  background: #ddd;
}
.buttons-container button:last-child {
  margin-left: auto;
  background: #ddd;
}
.buttons-container div {
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.buttons-container button {
  display: flex;
  margin: 1px;
  padding: 5px;
  background: #aaa;
}

/* true center */
p    { text-align: center; position: relative; }
span { background-color: aqua; }
p::before {
  content: "\2191";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  
}

<div class="buttons-container">
  <button mat-raised-button>A</button>
  <button mat-raised-button>B</button>
  <button mat-raised-button>C</button>
</div>

.buttons-container button:first-child {
  margin-right: auto;
  /*visibility: hidden; */
}
.buttons-container button:last-child {
  margin-left: auto;
  background: #ddd;
}
.buttons-container {
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.buttons-container button {
  display: flex;
  margin: 1px;
  padding: 5px;
  background: #aaa;
}

/* true center */
p    { text-align: center; position: relative; }
span { background-color: aqua; }
p::before {
  content: "\2191";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  
}

<div class="buttons-container">
  <button mat-raised-button>A</button>
  <button mat-raised-button>B</button>
  <button mat-raised-button>C</button>
</div>

https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self — Morpheus, Nov 14 '19 at 16:11
@Michael_B, your duplicate post is not the same case, I do not have `ul` and `li`. I have any `button` in a `div` — Stéphane GRILLON, Nov 14 '19 at 16:29
`.buttons-container button:first-child, .buttons-container button:last-child { margin-left: auto; }` Also, in your edited solution, the `justify-self: end;` is doing nothing. The `flex: 1` stretches the button to cover all available space, so there's nothing to justify. — Henrique Erzinger, Nov 14 '19 at 16:50
@sgrillon, the duplicate is perfectly suitable for this question. It provides five solutions which you can use. The HTML is irrelevant; the CSS can be applied to any series of elements. — Michael Benjamin, Nov 14 '19 at 17:08
And the solution provided by @HenriqueErzinger is not useful and does not work. It results in the A & B elements not perfectly centered due to the unequal distribution of free space on either side ([demo](https://jsfiddle.net/bfugqpmk/)). For a complete explanation of the problem and, again, five solutions, see the duplicate post. — Michael Benjamin, Nov 14 '19 at 17:11
@sgrillon because the purpose of a duplicate is to avoid repeating the same answer. He already provided a canonical answer that cover your case and even more — Temani Afif, Nov 14 '19 at 19:32
sorry, but I could not understand the answer with the other post because the answer is too long — Stéphane GRILLON, Nov 14 '19 at 19:36
@Michael_B, I edit my post with yours proposal but do not work with `button` in a `div` — Stéphane GRILLON, Nov 15 '19 at 09:02

How to use different align on same row with CSS flexbox?

0 Answers0