Я хочу использовать flexbox с некоторым количеством элементов одинаковой ширины. Я заметил, что flexbox распределяет пространство вокруг равномерно, а не само пространство.
Например:
.header {
display: flex;
}
.item {
flex-grow: 1;
text-align: center;
border: 1px solid black;
}
<div class="header">
<div class="item">asdfasdfasdfasdfasdfasdf</div>
<div class="item">z</div>
</div>
Первый элемент намного больше, чем второй. Если у меня есть 3 предмета, 4 предмета или n предметов, я хочу, чтобы все они отображались в одной строке с одинаковым количеством места на предмет.
Любые идеи?
flex
свойство является сокращенным свойством дляflex-grow
,flex-shrink
иflex-basis
свойств. Рекомендуется использовать сокращение над отдельными свойствами, так как сокращение корректно сбрасывает любые неопределенные компоненты, чтобы приспособиться к общему использованию. Начальное значение0 1 auto
.min-width: 0
чтобы добиться использования дочерних элементов с переполнением текста. См. Css-tricks.com/flexbox-truncated-textВы можете добавить,
flex-basis: 100%
чтобы достичь этого.Обновленный пример
Что бы это ни стоило, вы также можете использовать
flex: 1
для тех же результатов.Сокращение
flex: 1
такое же, какflex: 1 1 0
, что эквивалентно:источник
flex: 0 1 auto
. Что означает, что настройкаflex: 1
приведет кflex: 1 1 auto
. Это не будет работать. Правильный ответ,flex: 1 1 0
как указано выше, Адамflex: 1
результатовflex: 1 1 0
не так,flex: 1 1 auto
как вы утверждаете. Взгляните на официальную спецификацию W3 в разделе «flex shorthand» : когдаflex-basis
«опущено в flex-стенограмме, его указанное значение равно0
», а неauto
. Спасибо за случайное понижение.flex: 1
иflex-direction: column
. Высота дочерних элементов не была одинаковой, когда другие элементы помещались в дочерние элементы. Единственное, что исправило это, было установкаflex: 1 1 0
. Это все еще стоит сегодня с хромом 55.0.2883.87flex: 1
имеет то же поведениеflex: 1 1 0
, что иflex: 0 1 auto
другое поведение.Вы должны добавить,
width: 0
чтобы сделать столбцы равными, если содержимое элементов увеличивает их.источник
.item
шире, чем.item
обычно.flex: 1 1 0;
, вместоflex-grow: 1 1 0;
flex-basis
для0
служит той же цели, что и установкаwidth
для0
.Принятый ответ Adam (
flex: 1 1 0
) отлично работает для контейнеров flexbox, ширина которых либо фиксирована, либо определена предком. Ситуации, когда вы хотите, чтобы дети помещались в контейнер.Однако может возникнуть ситуация, когда вы хотите, чтобы контейнер соответствовал дочерним элементам, при этом размер дочерних элементов будет одинаковым по размеру в зависимости от наибольшего дочернего элемента. Вы можете сделать контейнер flexbox соответствующим его потомкам:
position: absolute
а не установкаwidth
илиright
, илиdisplay: inline-block
Для таких контейнеров flexbox принятый ответ НЕ работает, дочерние элементы имеют одинаковый размер. Я предполагаю, что это ограничение flexbox, так как он ведет себя одинаково в Chrome, Firefox и Safari.
Решение состоит в том, чтобы использовать сетку вместо flexbox.
Демо: https://codepen.io/brettdonald/pen/oRpORG
источник
Я не эксперт по флексу, но я получил это, установив основу на 50% для двух предметов, с которыми я имел дело. Вырасти до 1 и уменьшись до 0.
Встроенный стиль:
flex: '1 0 50%',
источник