Я использую гибкую коробку для отображения 8 элементов, которые будут динамически изменяться с моей страницей. Как заставить его разбивать элементы на две строки? (4 в строке)?
Вот соответствующий снипп:
(Или, если вы предпочитаете jsfiddle - http://jsfiddle.net/vivmaha/oq6prk1p/2/)
.parent-wrapper {
height: 100%;
width: 100%;
border: 1px solid black;
}
.parent {
display: flex;
font-size: 0;
flex-wrap: wrap;
margin: -10px 0 0 -10px;
}
.child {
display: inline-block;
background: blue;
margin: 10px 0 0 10px;
flex-grow: 1;
height: 100px;
}
<body>
<div class="parent-wrapper">
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div>
</body>
У вас есть flex-wrap: wrap
на контейнер. Это хорошо, потому что оно переопределяет значение по умолчанию, которое nowrap
(source). По этой причине в некоторых случаях элементы не переносятся в сетку.
В этом случае основной проблемой является flex-grow: 1
на flex-элементах.
Свойство flex-grow
самом деле не определяет размер элементов flex. Его задача - распределить свободное пространство в контейнере (исходном). Поэтому независимо от того, насколько мал размер экрана, каждый элемент будет получать пропорциональную часть свободного места в строке.
Точнее, в вашем контейнере есть восемь флекс. При использовании flex-grow: 1
каждый получает 1/8 свободного пространства на линии. Поскольку в ваших элементах нет содержимого, они могут сжиматься до нулевой ширины и никогда не будут переноситься.
Решение состоит в том, чтобы определить ширину элементов. Попробуй это:
.parent {
display: flex;
flex-wrap: wrap;
}
.child {
flex: 1 0 21%; /* explanation below */
margin: 5px;
height: 100px;
background-color: blue;
}
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
При использовании flex-grow: 1
определенном в сокращенном flex
, нет необходимости использовать flex-basis
25%, что фактически приведет к трем элементам в ряду из-за полей.
Поскольку flex-grow
будет занимать свободное место в строке, flex-basis
должен быть достаточно большим, чтобы обеспечить перенос. В этом случае с flex-basis: 21%
достаточно места для полей, но никогда не хватает места для пятого элемента.
Добавьте ширину к элементам .child
. Лично я бы использовал проценты в margin-left
если вы хотите, чтобы оно всегда составляло 4 на строку.
.child {
display: inline-block;
background: blue;
margin: 10px 0 0 2%;
flex-grow: 1;
height: 100px;
width: calc(100% * (1/4) - 10px - 1px);
}
Вот еще один apporach.
Вы также можете выполнить это:
.parent{
display: flex;
flex-wrap: wrap;
}
.child{
width: 25%;
box-sizing: border-box;
}
Пример: https://codepen.io/capynet/pen/WOPBBm
И более полная выборка: https://codepen.io/capynet/pen/JyYaba
<style type="text/css">
.parent{
display: flex;
flex-wrap: wrap;
}
.parent .child{
flex: 1 1 25%;
}
</style>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
Надеюсь, поможет. для более подробной информации вы можете перейти по этой ссылке
.parent-wrapper {
height: 100%;
width: 100%;
border: 1px solid black;
}
.parent {
display: flex;
font-size: 0;
flex-wrap: wrap;
margin-right: -10px;
margin-bottom: -10px;
}
.child {
background: blue;
height: 100px;
flex-grow: 1;
flex-shrink: 0;
flex-basis: calc(25% - 10px);
}
.child:nth-child(even) {
margin: 0 10px 10px 10px;
background-color: lime;
}
.child:nth-child(odd) {
background-color: orange;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
</style>
</head>
<body>
<div class="parent-wrapper">
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div>
</body>
</html>
;)
Я считаю, что этот пример более баребоны и легче понять, а затем @dowomenfart.
.child {
display: inline-block;
margin: 0 1em;
flex-grow: 1;
width: calc(25% - 2em);
}
Это выполняет одинаковые расчеты ширины, разрезая прямо на мясо. Математика проще, а em
- это новый стандарт благодаря своей масштабируемости и удобству для мобильных устройств.
Я бы сделал это, используя отрицательные поля и calc для желобов:
.parent {
display: flex;
flex-wrap: wrap;
margin-top: -10px;
margin-left: -10px;
}
.child {
width: calc(25% - 10px);
margin-left: 10px;
margin-top: 10px;
}
Демо: https://jsfiddle.net/9j2rvom4/
.parent {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-column-gap: 10px;
grid-row-gap: 10px;
}
Здесь другой способ без использования calc()
.
// 4 PER ROW
// 100 divided by 4 is 25. Let use 21% for width, and the remainder 4% for left & right margins...
.child {
margin: 0 2% 0 2%;
width: 21%;
}
// 3 PER ROW
// 100 divided by 3 is 33.3333... Let use 30% for width, and remaining 3.3333% for sides (hint: 3.3333 / 2 = 1.66666)
.child {
margin: 0 1.66666% 0 1.66666%;
width: 30%;
}
// and so on!
Вот и все. Вы можете получить представление о размерах, чтобы получить более эстетические размеры, но это идея.