Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 341
Ilya Novojilov Avatar asked Nov 06 '16 13:11

Ilya Novojilov


1 Answers

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>
like image 165
Nenad Vracar Avatar answered Sep 25 '22 08:09

Nenad Vracar