Макет Flexbox: как установить для каждого элемента одинаковую ширину в несколько строк?
Вот мой тестовая демонстрация в codepen. Я надеюсь сохранить одинаковое поле между элементами, поэтому я использую flex-grow: 1, чтобы заполнить ширину.
Однако элементы последней строки, кажется, не сохраняют ту же ширину, что и предыдущие строки. Как это сделать?
.row{
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.col{
min-width: 160px;
flex-grow: 1;
margin: 10px 10px;
background:#eee;
height: 120px;
}
Это то, что я хочу, аддон использует flex-grow, чтобы сохранить ту же маржу
Ответы 3
ваш min-width может перетащить div на следующую строку, и я уменьшу его.
и вы должны использовать flex в столбцах и flex-direction в строке
что-то вроде этого:
.row{
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
flex-direction: row;
}
.col{
min-width: 20px;
flex-grow: 1;
margin: 10px 10px;
background:#eee;
height: 120px;
flex: 1;
}<div class = "row">
<div class = "col">
a
</div>
<div class = "col">
b
</div>
<div class = "col">
c
</div>
</div>.row{
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
flex-direction: row;
}
.col{
min-width: 200px;
flex-grow: 1;
margin: 10px 10px;
background:#eee;
height: 120px;
flex: 1;
}<div class = "row">
<div class = "col">
a
</div>
<div class = "col">
b
</div>
<div class = "col">
c
</div>
<div class = "col">
b
</div>
<div class = "col">
c
</div>
</div>.row{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
flex-direction: row;
}
.col{
width: 200px;
margin: 10px 10px;
background:#eee;
height: 120px;
}<div class = "row">
<div class = "col">
a
</div>
<div class = "col">
b
</div>
<div class = "col">
c
</div>
<div class = "col">
b
</div>
<div class = "col">
c
</div>
</div>он автоматически перейдет к следующей строке, но если вы хотите быть в одной строке, вы должны удалить минимальную ширину.
нужна минимальная ширина, и автоматический переход к следующей строке в порядке. но я надеюсь, что элементы сохранят одинаковую ширину
ок посмотреть все результаты. и вы также можете использовать максимальную ширину
Я надеюсь, что следующий код может решить вашу проблему.
.row{
display: flex;
flex-wrap: wrap;
background: red;
}
.col{
flex: 1;
min-width: calc(33.33% - 30px);
max-width: calc(33.33% - 30px);
margin: 10px 15px;
background:#eee;
height: 120px;
}<div class = "row">
<div class = "col">1</div>
<div class = "col">2</div>
<div class = "col">3</div>
<div class = "col">4</div>
<div class = "col">5</div>
</div>спасибо, но теперь каждая строка ограничена только 3 столбцами, возможна динамическая установка min-width=160px
Вы можете использовать calc, чтобы установить для свойства ширина или гибкая основа значение calc(33.33% - 30px), чтобы оно соответствовало правое и левое поля, которое вы применили к col — см. демонстрацию ниже:
.row{
display: flex;
flex-wrap: wrap;
background: red;
}
.col{
flex-basis: calc(33.33% - 30px);
margin: 10px 15px;
background:#eee;
height: 120px;
}<div class = "row">
<div class = "col">1</div>
<div class = "col">2</div>
<div class = "col">3</div>
<div class = "col">4</div>
<div class = "col">5</div>
</div>спасибо, но теперь каждая строка ограничена только 3 столбцами, возможна динамическая установка min-width=160px
но если у вас есть min-width на небольших экранах, это нарушит этот макет...
спасибо, но предметов много, что не могу поставить в один ряд... У меня были детали обновления, о которых идет речь