Ilya Novojilov Ilya Novojilov - 1 month ago 12
CSS Question

Flexbox justify-content depending on number of children

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

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>