Flexbox: 4 элемента в строке

Я использую гибкую коробку для отображения 8 элементов, которые будут динамически изменяться с моей страницей. Как заставить его разбивать элементы на две строки? (4 в строке)?Flexbox: 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>

источник

2015-04-09 Vivek Maharajh

[Обновить] Этот вопрос был основан на плохом невосприимчивом дизайне. Если вы обнаружите, что используете один из ответов ниже, будьте осторожны. В хорошем дизайне у вас будет больше предметов на более широких экранах и меньше на меньших экранах. Принуждение 4 элементов для всех размеров экрана будет выглядеть привлекательно только в узком диапазоне ширины экрана. –

Добавить ширину в .child элементов. Я лично использовал бы проценты на margin-left, если вы хотите иметь его всегда 4 за строку.

DEMO

.child { 
    display: inline-block; 
    background:blue; 
    margin:10px 0 0 2%; 
    flex-grow: 1; 
    height:100px; 
    width: calc(100% * (1/4) - 10px - 1px); 
}

источник

2015-04-09 18:52:45 dowomenfart

Хорошая идея. Я использовал эту идею с небольшими изменениями. http://jsfiddle.net/vivmaha/oq6prk1p/6/ –

Ах. На самом деле это не решает мою проблему. См. Здесь пример: http://jsfiddle.net/vivmaha/oq6prk1p/7/. Я не имею права использовать проценты за свою маржу. Они должны быть фиксированной шириной. Это означает, что магия 23%, которую мы выбрали, не будет работать, поскольку она не учитывает фиксированную маржу. –

Да, calc решает! 'calc (100% * (1/4) - 10px - 1px)'. См. Http://jsfiddle.net/vivmaha/oq6prk1p/9/ –

-10

Вот еще один способ без использования calc().

// 4 PER ROW 
// 100 divided by 4 is 25. Let's 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's 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!

Это все, что есть. Вы можете получить представление о размерах, чтобы получить более эстетические размеры, но это идея.

источник

2016-07-31 20:30:38 williamle8300

. Я не тестировал это, но синтаксис CSS неверен (значения CSS не цитируются, а объявления должны заканчиваться в виде двоеточия), поэтому он определенно не будет работать в его нынешнем виде. –

Вот еще один 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

источник

2017-07-13 22:36:47 Capy

А если у меня меньше 4 детей? Мне не нравится это пустое пространство, ребенок не реагирует ... – candlejack

У вас есть flex-wrap: wrap на контейнере. Это хорошо, потому что оно переопределяет значение по умолчанию, которое равно nowrap (source). По этой причине элементы не обертываются, чтобы сформировать сетку в some cases.

В этом случае основной проблемой является flex-grow: 1 на гибких элементах.

Свойство flex-grow на самом деле не является размерным элементом. Его задача - распределить свободное пространство в контейнере (source). Поэтому, независимо от размера экрана, каждый элемент получит пропорциональную часть свободного места на линии.

В частности, в вашем контейнере имеется восемь элементов гибкости. С flex-grow: 1 каждый получает 1/8 свободного места на линии. Поскольку в ваших товарах нет контента, они могут сжиматься до нулевой ширины и никогда не будут обертываться.

Решение заключается в определении ширины элементов. Попробуйте это:

.parent { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.child { 
 
    flex: 1 0 20%; /* 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: 20%, для полей достаточно места, но недостаточно для пятого элемента.

источник

2017-07-29 01:39:28

Это, на самом деле, настоящий ** ответ. Отзывчивый, чистый и действительный. – candlejack

<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>

Надеюсь, это поможет. для более подробной информации вы можете следить за этим link

источник

2017-08-16 10:40:38

Я считаю, что этот пример является более barebone и проще понять затем @dowomenfart.

.child { 
    display: inline-block; 
    margin: 0 1em; 
    flex-grow: 1; 
    width: calc(25% - 2em); 
}

Выполнение таких же расчетов ширины при разрезании прямо на мясо. Математика проще, и em - это new standard благодаря своей масштабируемости и удобству в использовании.

источник

2017-10-10 01:42:04

em на самом деле не новый стандарт. Это может быть боль в заднице, и дизайнеры не разрабатывают с учетом ЭМ. –

Flexbox: 4 элемента в строке

ответ

Смежные вопросы