Flexbox justify-content depending on number of children - css

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!