Flexbox justify-content depending on number of children

Question

Having this:

  <label>
    <button>Create</button>
  </label>

I want button to be aligned to the right like this

----------------------------
|                   [create]|
----------------------------

while having this:

  <label>
    <button>Delete</button>
    <button>Update</button>
  </label>

I want buttons to be in the corners

----------------------------
|[delete]          [update]|
----------------------------

Without adding additional classes to the label.

Answer 1

You can just use margin-left: auto on last-child and that will produce desired result.

label {
  display: flex;
  border-bottom: 1px solid #aaa;
  margin: 20px 0;
}
label button:last-child {
  margin-left: auto;
}

<label>
  <button>Create</button>
</label>

<label>
  <button>Delete</button>
  <button>Update</button>
</label>

Answer 2

You can do this using nothing but standard flexbox properties:

• flex-direction: row-reverse - put the items in a row, start from "the end" (depends on reading direction)
• justify-content: space-between - put the items as far away from each other as possible

label {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}

<label>
  <button>Create</button>
</label>

<label>
  <button>Delete</button>
  <button>Update</button>
</label>

Answer 3

You can use CSS Flexbox justify-content property to align your elements.

Have a look at this Codepen.

Or look at the code below for reference, also I've used <div>s in place of <label> as in the .two they are acting on both the buttons.

div {
  display: flex;
  background: #ddd;
  padding: 10px 20px;
  margin-bottom: 10px;
}

div:first-child {
  justify-content: flex-end;
}

div:nth-child(2) {
  justify-content: space-between;
}

<div>
  <button>Create</button>
</div>

<div>
  <button>Delete</button>
  <button>Update</button>
</div>

Learn more about CSS Flexbox

Hope this helps!