Я использую flex box для отображения 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
( источник ). Это причина, по которой элементы в некоторых случаях не переносятся в сетку .В этом случае основная проблема заключается
flex-grow: 1
в гибких элементах.flex-grow
Свойство фактически не размер сгибать детали. Его задача - распределить свободное пространство в контейнере ( исходном ). Поэтому независимо от того, насколько мал размер экрана, каждый элемент получит пропорциональную часть свободного места в строке.Точнее, в вашем контейнере есть восемь флекс. При этом
flex-grow: 1
каждый получает 1/8 свободного места на линии. Поскольку в ваших элементах нет содержимого, они могут сжиматься до нулевой ширины и никогда не переносятся.Решение состоит в том, чтобы определить ширину элементов. Попробуй это:
С участием
flex-grow: 1
определенным вflex
сокращении, нет необходимостиflex-basis
быть 25%, что фактически привело бы к трем элементам в строке из-за полей.Поскольку
flex-grow
в строке будет занимать свободное место, онflex-basis
должен быть достаточно большим, чтобы обеспечить перенос. В этом случае приflex-basis: 21%
наличии достаточно места для полей, но никогда не хватает места для пятого элемента.источник
flex: 1 0 calc(25% - 10px);
margin: 2%;
вместо фиксированного числа пикселей, чтобы блоки не переходили на новую строку на небольших устройствах / разрешениях. общая формула(100 - (4 * box-width-percent)) / 8
% для разныхДобавьте ширину к
.child
элементам. Лично я бы использовал проценты,margin-left
если вы хотите, чтобы оно всегда было 4 на строку.DEMO
источник
Вот еще один apporach.
Вы также можете сделать это следующим образом:
Образец: https://codepen.io/capynet/pen/WOPBBm
И более полный пример: https://codepen.io/capynet/pen/JyYaba
источник
Я бы сделал это так, используя отрицательные поля и calc для желобов:
Демо: https://jsfiddle.net/9j2rvom4/
Альтернативный метод CSS Grid:
Демо: https://jsfiddle.net/jc2utfs3/
источник
Надеюсь, поможет. для более подробной информации вы можете перейти по этой ссылке
источник
Я считаю, что этот пример более прост и понятен, чем @dowomenfart.
Это выполняет те же вычисления ширины при резке прямо на мясо. Математика намного проще и
em
является новым стандартом благодаря своей масштабируемости и мобильности.источник
;)
источник
justify-content: space-evenly;
к prent, то они хорошо выровняются, и вам не нужно делатьcalc
с ребенком. Спасибо за пример, хотя!Flex wrap + отрицательное поле
Почему гибкий против
display: inline-block
?Почему отрицательная маржа?
Либо вы используете SCSS или CSS-in-JS для крайних случаев (т. Е. Первый элемент в столбце), либо вы устанавливаете поле по умолчанию и позже избавляетесь от внешнего поля.
Реализация
https://codepen.io/zurfyx/pen/BaBWpja
источник
Вот еще один способ без использования
calc()
.Это все, что нужно сделать. Вы можете придумать размеры, чтобы получить более эстетичные размеры, но это идея.
источник