Вопрос:
В такой структуре:
<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; } Ответ №1
Чтобы добиться равного распределения, вы должны добавить width: 0 ко всем элементам flex. Это пришло мне в голову после прочтения статьи Мануэля Матузовича, в которой очень хорошо дано глубокое заключение о том, как работает flex-grow.
