it-swarm.com.ru

Flexbox: 4 предмета в ряду

Я использую 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>
167
Vivek Maharajh

У вас есть 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% достаточно места для полей, но никогда не хватает места для пятого элемента.

230
Michael_B

Добавьте ширину к элементам .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);
}
93
dowomenfart

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

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

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

10
Muddasir Abbas

Я бы сделал это так, используя отрицательные поля и 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/


Альтернативный метод CSS Grid:

.parent {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

Демонстрация: https://jsfiddle.net/jc2utfs3/

6
shanomurphy
.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>

;)

2
Mateus Manosso Barszcz

Я считаю, что этот пример более скромный и легче понять , чем @dowomenfart.

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

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

1
Joseph Cho