Как сделать флексбоксы одинакового размера?
Я хочу использовать 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 предметов, я хочу, чтобы они отображались на одной строке с одинаковым количеством места на предмет.
Есть идеи?
12 ответов
Установите их так, чтобы их flex-basis является 0 (поэтому все элементы имеют одинаковую отправную точку) и позволяют им расти:
flex: 1 1 0
Добавление ширины: 0 помогло мне решить проблему
.item {
flex-grow: 1 1 0;
width: 0;
}
вот ссылка, которая поможет мне решить мою проблему: Всегда равные столбцы flexbox
Вы могли бы добавить flex-basis: 100% для достижения этой цели.
.header {
display: flex;
}
.item {
flex-basis: 100%;
text-align: center;
border: 1px solid black;
}
Для чего это стоит, вы также можете использовать flex: 1 для тех же результатов, а также.
Стенограмма flex: 1 такой же как flex: 1 1 0, что эквивалентно:
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
text-align: center;
border: 1px solid black;
}
Принятый ответ Адама (flex: 1 1 0) отлично работает с контейнерами flexbox, ширина которых либо фиксирована, либо определяется предком. Ситуации, когда вы хотите, чтобы дети поместились в контейнер.
Однако у вас может возникнуть ситуация, когда вы хотите, чтобы контейнер подходил для детей, при этом дети имели одинаковый размер в зависимости от самого большого дочернего элемента. Контейнер 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;
}
Я не эксперт в гибкости, но я достиг этого, установив основу на 50% для двух пунктов, с которыми я имел дело. Вырасти до 1 и уменьшись до 0.
Встроенный стиль: flex: '1 0 50%',
Ни одно из этих решений у меня не сработало, поэтому я решил поделиться тем, что сработало.
.header {
display: flex;
}
.header .item {
width: 100%;
}
Ни один из этих ответов не решил мою проблему, заключающуюся в том, что элементы не имели одинаковой ширины в моей импровизированной таблице flexbox, когда она была уменьшена до слишком маленькой ширины.
Решение для меня было просто поставить overflow: hidden; на flex-grow: 1; клетки.
на дочернем элементе flex
flex: 1 1 25%
это позволит иметь 4 элемента, если вы хотите добавить больше элементов, вы можете уменьшить%
Надежно и равномерно распределить столбцы с помощью flexbox может быть очень сложно по сложным причинам, связанным с заполнением, границей и полями, которые подробно объясняются в этой статье .
Одна из альтернатив предлагает вместо этого использовать сетку со следующими стилями:
.grid-container {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
}
Это будет работать, даже если вы оборачиваете элементы , например Grid , но не так просто, вы должны показать, куда он будет перенесен в медиа-запросах))
пример:
.flex-item{
flex: 0 0 calc(25% - (45px / 4 ))
}
работает так:
$n: 4; // number of columns
$gap: 15px; // margin pixels
.flex-parent{
display: flex;
gap: $gap;
}
.flex-item{
flex: 0 0 calc(100% / $n - (($n - 1) * $gap / $n ) );
}
У меня была аналогичная проблема, и я нашел способ обмануть.
Как говорили другие,
Это проще, если вы знаете ширину родительского контейнера, но даже если вы этого не знаете, вы можете установить
.container{
display:flex;
flex-wrap:wrap;
}
.item{
flex basis:(add required width px)
}
Если последняя строка имеет только один элемент и он занимает всю ширину, удалите «flex-grow» из гибкого элемента и попробуйте добавить только «flex-basis:(req px)» или «flex-shrink:1». Это сработало для меня!