Прийнята відповідь Адама (flex: 1 1 0 ) ідеально підходить для контейнерів флексоксину, ширина яких або фіксована, або визначена предком. Ситуації, коли ви хочете, щоб діти вмістили контейнер.
Однак у вас може виникнути ситуація, коли ви хочете, щоб контейнер вміщав дітей, і діти мають однаковий розмір залежно від найбільшої дитини. Ви можете зробити контейнер flexbox для своїх дітей будь-яким:
- установка
position: absoluteі настройка widthабо right, або
- помістіть його всередину обгортки з
display: inline-block
Для таких контейнерів flexbox прийнята відповідь НЕ працює, діти не розмірів однаково. Я припускаю, що це обмеження flexbox, оскільки він поводиться так само в Chrome, Firefox та Safari.
Рішення - використовувати сітку замість флексбоксу.
Демонстрація: https://codepen.io/brettdonald/pen/oRpORG
<p>Normal scenario — flexbox where the children adjust to fit the container — and the children are made equal size by setting {flex: 1 1 0}</p>
<div id="div0">
<div>
Flexbox
</div>
<div>
Width determined by viewport
</div>
<div>
All child elements are equal size with {flex: 1 1 0}
</div>
</div>
<p>Now we want to have the container fit the children, but still have the children all equally sized, based on the largest child. We can see that {flex: 1 1 0} has no effect.</p>
<div class="wrap-inline-block">
<div id="div1">
<div>
Flexbox
</div>
<div>
Inside inline-block
</div>
<div>
We want all children to be the size of this text
</div>
</div>
</div>
<div id="div2">
<div>
Flexbox
</div>
<div>
Absolutely positioned
</div>
<div>
We want all children to be the size of this text
</div>
</div>
<br><br><br><br><br><br>
<p>So let's try a grid instead. Aha! That's what we want!</p>
<div class="wrap-inline-block">
<div id="div3">
<div>
Grid
</div>
<div>
Inside inline-block
</div>
<div>
We want all children to be the size of this text
</div>
</div>
</div>
<div id="div4">
<div>
Grid
</div>
<div>
Absolutely positioned
</div>
<div>
We want all children to be the size of this text
</div>
</div>
body {
margin: 1em;
}
.wrap-inline-block {
display: inline-block;
}
#div0, #div1, #div2, #div3, #div4 {
border: 1px solid #888;
padding: 0.5em;
text-align: center;
white-space: nowrap;
}
#div2, #div4 {
position: absolute;
left: 1em;
}
#div0>*, #div1>*, #div2>*, #div3>*, #div4>* {
margin: 0.5em;
color: white;
background-color: navy;
padding: 0.5em;
}
#div0, #div1, #div2 {
display: flex;
}
#div0>*, #div1>*, #div2>* {
flex: 1 1 0;
}
#div0 {
margin-bottom: 1em;
}
#div2 {
top: 15.5em;
}
#div3, #div4 {
display: grid;
grid-template-columns: repeat(3,1fr);
}
#div4 {
top: 28.5em;
}
flexвластивість є скороченим властивістю дляflex-grow,flex-shrinkіflex-basisвластивостей. Рекомендується використовувати стенограму над окремими властивостями, оскільки стенограма правильно скидає будь-які не визначені компоненти для забезпечення загального використання. Початкове значення -0 1 auto.