CSS3 flexbox макет max 3 дочерних элемента на одной строке

Является ли их простой способ в CSS иметь фиксированный максимум дочерних элементов в одной строке, прежде чем вы нажимаете следующие дочерние элементы на новую строку?

Как я понимаю flexbox, дочерние элементы попадают только в новую строку, если их достаточно свободного места на линии над ней. Но я ищу правило или функцию CSS, которые позволяют мне сказать ", я хочу, чтобы на любой заданной строке было не более 3 дочерних элементов, и даже если пространство доступно для 4-го, нажмите его на новую строку".

Ответ 1

Вместо использования display: flex вы можете использовать float: left и clear для каждого третьего дочернего элемента node следующим образом:

.child {
    background: #000;
    height: 300px;
    float: left;
    margin:15px 0 0 15px;
    width:150px;

}
.child:nth-child(3n+1) {
    clear: left;   
}

Я создал для вас скрипку: пример скрипки

В случае, если родитель может содержать только двух детей, вы можете использовать это короткое исправление jQuery:

var child = $('.child'),
    parent = $('.child').parent();

if( child.width() > (parent.width()/3) ) {
     child.css('clear', 'none');   
}

Fiddle with fix: скрипт example2

Ответ 2

Используйте flex-basis.

.child {
flex-basis: 33%;
}

Процент должен быть адаптирован в соответствии с вашей моделью выбора размеров ящиков, а также с использованием полей и/или заполнения.

Ответ 3

скрипка

#container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
#container>div {
  margin: 15px;
  width: 150px;
  height: 150px;
}

/* negative paddings are treated as 0 so woohoo */
#container>div {
  /* up to 3 boxes in a row */
  padding: 0 calc((100% - 180px * 3) / 6);
}
#container>div {
  /* up to 4 boxes in a row */
  //padding: 0 calc((100% - 180px * 4) / 8);
}
#container>div {
  /* up to 5 boxes in a row */
  //padding: 0 calc((100% - 180px * 5) / 10);
}
/* 180px = width + horizontal margins */

Ответ 4

Вы можете поместить элементы внутри контейнера div с шириной 100% и максимальной шириной, достаточной для размещения в ней трех элементов?

.parent {
    width:100%;
    max-width:350px;
}

И затем поместите это вокруг всех элементов.

<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

Ответ 5

Если вы используете его с bootstrap, вы добавите этот css для класса псевдо row

.row:before,
.row:after{
    width:0 !important;
 }