В такой структуре:
<div id="1">
<div id="2">
<div id="3">
</div>
</div>
<div id="4">
<div id="5">
</div>
</div>
</div>
с css, указанным как:
#1{
display: flex;
flex-direction: row;
}
#2, #4{
flex: 1;
}
Дивы с id 2 и 4 будут равномерно распределены, если сумма ширины содержимого в id 3 и 5 не превышает ширину dom с id 1.
Когда сумма превышает ширину, они распределяются неравномерно, а одна с более широким контентом будет занимать больше места. Как заставить 2 и 4 брать даже ширину с помощью flexbox даже в таких случаях?
Я не хочу использовать ширину спецификации на проценты. Я хочу придерживаться flexbox.
Если вы хотите, чтобы элементы расти или уменьшались независимо от содержимого, укажите нуль flex basis:
flex-basis: 0;
Однако мое демо неправильно работает в Chrome: большое изображение растягивает его родительский контейнер независимо от того, установлен ли нулевой базис. В качестве обходного пути можно установить максимальную ширину:
img {
max-width: 100%;
height: auto;
}
Чтобы добиться равного распределения, вы должны добавить width: 0 ко всем элементам flex. Это пришло мне в голову после прочтения статьи Мануэля Матузовича, в которой очень хорошо дано глубокое заключение о том, как работает flex-grow.