Я хочу, чтобы элементы гибкости занимали полную высоту, а содержимое внутри них было вертикально центрировано.
justify-content: centre
не работает, а align-self: centre
самого элемента уменьшает его высоту до собственного содержимого, в то время как я хочу, чтобы все элементы были одинаковой высоты.
В этом примере я хочу, чтобы числа были вертикально центрированы: http://codepen.io/ilyador/pen/ogYbWO?editors=110
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
}
.flex-item {
flex: 1 1;
background: tomato;
padding: 5px;
margin-top: 10px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
border: solid 1px red;
}
<ul class="flex-container">
<li class="flex-item">1fbdms s s sdj dfkg kjfg dkfj gdfjkgdfkj gdfkjg dfkjgdkhdfjk gkjdfkjdfgdfg jkdfgdfjkgk </li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
<li class="flex-item">6</li>
</ul>