Wyświetlanie CSS: flex, align-center i button z polami wyboru - html5, css3, flexbox

Wewnątrz znajduje się elastyczne pudełko z guzikami i etykietą. Widocznie align-items właściwość nie wyrównuje przycisków. Jak mogę to osiągnąć?

https://jsfiddle.net/elaman/4uyggo7s/

<div class="wrapper">
<div>
<button>Test</button>
</div>
<div>
<input type="checkbox" id="test" />
<label for="test">Test</label>
</div>
<div>
<button>Test</button>
</div>
<div>
<button>Test</button>
</div>
</div>

CSS

.wrapper {
display: flex;
}
.wrapper > * {
align-items: baseline;
}
.wrapper > :first-child {
flex: 1 0 auto;
}
.wrapper button {
padding: 10px;
}

Aktualizacja: Szukam sposobu wyrównania w pionie etykiety, pola wyboru i przycisku do pojedynczej linii bazowej.

Odpowiedzi:

The align-items właściwość dotyczy elastycznych pojemników, a nie elastycznych przedmiotów.

Więc powinieneś to zastosować .wrapper zamiast .wrapper > *:

.wrapper {
align-items: baseline; /* Align the baselines of the flex items */
}

.wrapper {
display: flex;
align-items: baseline;
}
.wrapper > :first-child {
flex: 1 0 auto;
}
.wrapper button {
padding: 10px;
}

<div class="wrapper">
<div>
<button>Test</button>
</div>
<div>
<input type="checkbox" id="test" />
<label for="test">Test</label>
</div>
<div>
<button>Test</button>
</div>
<div>
<button>Test</button>
</div>
</div>

Ponadto sugeruję uproszczenie znaczników, usunięcie niepotrzebnych wewnętrznych opakowań:

.wrapper {
display: flex;         /* Magic begins */
align-items: baseline; /* Align the baselines of the flex items */
}
.wrapper > :first-child {
margin-right: auto;    /* Push following flex items to the right */
}
.wrapper button {
padding: 10px;
}

<div class="wrapper">
<button>Test</button>
<input type="checkbox" id="test" />
<label for="test">Test</label>
<button>Test</button>
<button>Test</button>
</div>