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>

Sign up