Свойство flex-basis: 0
Если трем flex-элементам заданы flex-grow 1, 1 и 2, то они займут соответственно 25%, 25% и 50% доступного пространства, независимо от их содержимого, только если flex-basis: 0.
- мало
- мноооооооооооого
- мало
Исходный код этого примера:
<style>
ul.flex {
display: flex;
padding: 0;
margin: 0;
list-style: none;
}
li.flex {
flex-basis: 0;
display: inline-block;
background: tomato;
border: 2px dotted yellowgreen;
height: 50px;
line-height: 50px;
color: white;
font-size: 18px;
text-align: center;
}
</style>
<ul class="flex">
<li class="flex" style="flex-grow: 1;">мало</li>
<li class="flex" style="flex-grow: 1;">мноооооооооооого</li>
<li class="flex" style="flex-grow: 2;">мало</li>
</ul>
.
Прокомментировать/Отблагодарить