Как я могу иметь два ряда неровных, центрированных элементов с flexbox? - PullRequest
Новая
       0

Как я могу иметь два ряда неровных, центрированных элементов с flexbox?

1 голос
/ 06 февраля 2020

Это макет, который я пытаюсь создать:

enter image description here

Это сетка ящиков:

  • Максимальное количество элементов в ящике должно быть настраиваемым (4, в данном случае, но должно иметь разные значения).
  • , если последняя строка не завершена и содержит «сироты», элементы должны оставаться по центру, но с той же шириной, что и у других блоков.
  • Сетка должна использовать всю ширину своего контейнера. Это означает, что пространство, окружающее коробки снаружи, не заполнено, когда строка заполнена.
  • Предпочтительно должен существовать способ установить зазор между полями

Я думал лучшим инструментом для этого был бы flexbox, но я столкнулся со следующими проблемами:

Мой подход был таким: 

.boxes {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.box {
  width: 22%;
  height: 200px;
  /* pure decoration... */
  box-shadow: 0 0 10px black inset;
  background: green;
}
<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

, который дает этот результат:

enter image description here

Ссылка Codepen

Здесь есть несколько проблем:

  1. Последняя строка не центрирована.
  2. Я не могу установить фиксированное поле между полями. Мне также хотелось бы также, чтобы это поле всегда было одинаковым, независимо от того, сколько элементов может уместиться в строке.
  3. На самом деле незначительные неудобства, но способ установить количество элементов max в строке ненадежен. Мне пришлось бы сделать операцию деления 100 / max, что может привести к странным результатам (100/3 = 33,333333 ...).

Как я могу получить лучший результат?

ОБНОВЛЕНИЕ

Требование, которое я забыл добавить:

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

Ответы [ 4 ]

2 голосов
/ 06 февраля 2020

UPDATE шкала, иллюстрирующая

  • Мы используем css variables, например --margin-right-value, --row-elements-number
  • Мы используем классы формы * От 1012 * до .boxes20 для определения различного поведения строк с разными номерами элементов.
  • Обертываем наши .boxes<number> классы для упрощения css, мы сопоставляем классы, начинающиеся с boxes внутри оболочки, опционально, может поддерживаться без оболочки.
  • Конечно, margin-top (также можно использовать как переменную, если необходимо), и --margin-right-value можно указывать в каждом .boxes<number> классе.

После того, как написано, можете использовать классы после того, как вы хотите.

Посмотрите на фрагмент. Или https://jsfiddle.net/beluginni/kb8L71c3/

.wrapper [class*="boxes"] {
  margin-bottom: 30px; /* to separate visualy*/
}

:root {
  --margin-right-value: 10px; /* margin between elements in row, can be specified within each of boxes<n> classes */
}

.boxes2 { --row-elements-number: 2; }
.boxes3 { --row-elements-number: 3; }
.boxes4 { --row-elements-number: 4; }
.boxes5 { --row-elements-number: 5; }
.boxes6 { --row-elements-number: 6; }
.boxes7 { --row-elements-number: 7; }
.boxes8 { --row-elements-number: 8; }
.boxes9 { --row-elements-number: 9; }
.boxes10 { --row-elements-number: 10; }
.boxes11 { --row-elements-number: 11; }
.boxes12 { --row-elements-number: 12; }
.boxes13 { --row-elements-number: 13; }
.boxes14 { --row-elements-number: 14; }
.boxes15 { --row-elements-number: 15; }
.boxes16 { --row-elements-number: 16; }
.boxes17 { --row-elements-number: 17; }
.boxes18 { --row-elements-number: 18; }
.boxes19 { --row-elements-number: 19; }
.boxes20 { --row-elements-number: 20; }


.wrapper [class*="boxes"] {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  outline: dotted red 1px;
}


/*width: calc((100% - (<margin_value> * (<row_el_number> - 1))) / <row_el_number>)*/
.box {
  width: calc((100% - (var(--margin-right-value) * (var(--row-elements-number) - 1))) / var(--row-elements-number));
  height: 100px;
  box-shadow: 0 0 10px black inset;
  background: green;
}

.boxes2 .box:nth-child(n+3),
.boxes3 .box:nth-child(n+4),
.boxes4 .box:nth-child(n+5),
.boxes5 .box:nth-child(n+6),
.boxes6 .box:nth-child(n+7),
.boxes7 .box:nth-child(n+8),
.boxes8 .box:nth-child(n+9),
.boxes9 .box:nth-child(n+10),
.boxes10 .box:nth-child(n+11),
.boxes11 .box:nth-child(n+12),
.boxes12 .box:nth-child(n+13),
.boxes13 .box:nth-child(n+14),
.boxes14 .box:nth-child(n+15),
.boxes15 .box:nth-child(n+16),
.boxes16 .box:nth-child(n+17),
.boxes17 .box:nth-child(n+18),
.boxes18 .box:nth-child(n+19),
.boxes19 .box:nth-child(n+20),
.boxes20 .box:nth-child(n+21) {
  margin-top: 4%; /* margin between rows, can be represented as var and specified within each of boxes<n> classes */
}

.boxes2 .box:not(:nth-child(2n)):not(:last-child),
.boxes3 .box:not(:nth-child(3n)):not(:last-child),
.boxes4 .box:not(:nth-child(4n)):not(:last-child),
.boxes5 .box:not(:nth-child(5n)):not(:last-child),
.boxes6 .box:not(:nth-child(6n)):not(:last-child),
.boxes7 .box:not(:nth-child(7n)):not(:last-child),
.boxes8 .box:not(:nth-child(8n)):not(:last-child),
.boxes9 .box:not(:nth-child(9n)):not(:last-child),
.boxes10 .box:not(:nth-child(10n)):not(:last-child),
.boxes11 .box:not(:nth-child(11n)):not(:last-child),
.boxes12 .box:not(:nth-child(12n)):not(:last-child),
.boxes13 .box:not(:nth-child(13n)):not(:last-child),
.boxes14 .box:not(:nth-child(14n)):not(:last-child),
.boxes15 .box:not(:nth-child(15n)):not(:last-child),
.boxes16 .box:not(:nth-child(16n)):not(:last-child),
.boxes17 .box:not(:nth-child(17n)):not(:last-child),
.boxes18 .box:not(:nth-child(18n)):not(:last-child),
.boxes19 .box:not(:nth-child(19n)):not(:last-child),
.boxes20 .box:not(:nth-child(20n)):not(:last-child) {
  margin-right: var(--margin-right-value);
}
<div class="wrapper">
  <div class="boxes2">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  
  <div class="boxes3">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>

  <div class="boxes4">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>

  <div class="boxes5">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  
  <div class="boxes6">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  
  <div class="boxes7">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  
  <div class="boxes8">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  
  <div class="boxes9">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  
  <div class="boxes10">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  
  <div class="boxes11">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  
  <div class="boxes12">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  
  <div class="boxes13">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  
  <div class="boxes14">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  
  <div class="boxes15">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  
  <div class="boxes16">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  
  <div class="boxes17">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  
  <div class="boxes18">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  
  <div class="boxes19">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  
  <div class="boxes20">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

JSFieddle для воспроизведения с разными значениями

ОБНОВЛЕНИЕ улучшение поля и определение ширины .box

Формулы для расчета .box width и margin между ними:

Если известна маржа: width: calc((100% - (<margin_value> * (<row_elements_number> - 1))) / <row_elements_number>).

  • Для 4 подряд .box width: calc((100% - (<margin_value> * (4 - 1))) / 4)
  • Для 3 подряд .box width: calc((100% - (<margin_value> * (3 - 1))) / 3)
  • Для 5 подряд .box width: calc((100% - (<margin_value> * (5 - 1))) / 5)

Если известна ширина .box: margin-rigth: calc((100% - <.box_width_value> * <row_elements_number>) / (<row_elements_number> - 1)).

  • Для 4 подряд margin-rigth: calc((100% - <.box_width_value> * 4) / (4 - 1))
  • Для 3 подряд margin-rigth: calc((100% - <.box_width_value> * 3) / (3 - 1))
  • Для 5 в строка margin-rigth: calc((100% - <.box_width_value> * 5) / (5 - 1))

css проста 

.box:not(:nth-child(<row-elements-number>n)):not(:last-child) {
  margin-right: <desired value>;
}

ОСНОВНАЯ ИДЕЯ

должна сделать justify-content: center; и добавить margins каждому ребенку , кроме :nth-child(<row-elements-number>n)):not(:last-child). В нашем случае каждые 4th и last не имеют значения поля.

Давайте возьмем margin-rigth: 4% => box-width равно calc((100% - (4% * (4 - 1))) / 4)

.boxes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  border: dotted black 1px; /* to see edges */
}

/*width: calc((100% - (<margin_value> * (4 - 1))) / 4)*/
.box {
  width: calc((100% - (4% * (4 - 1))) / 4);
  height: 100px; /* changed */
  /* pure decoration... */
  box-shadow: 0 0 10px black inset;
  background: green;
}

.box:nth-child(n+5) {
  margin-top: 4%; /*added*/
}

.box:not(:nth-child(4n)):not(:last-child) {
  margin-right: 4%;
}
<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

<hr>

<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

<hr>

<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

ОБНОВЛЕНИЕ для иллюстрации настроек

Для управления margin после замены последней строки margin-bottom: value; в box класс с 

.box:nth-child(n + (<row_elements_number> + 1)) {
  margin-top: <desired_value>;
}

Кейс для 3-х подряд

Давайте возьмем margin-right: 1% => .box width:calc((100% - (1% * (3 - 1))) / 3)

.boxes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  border: dotted black 1px; /* to see edges */
}

/*width: calc((100% - (<margin_value> * (3 - 1))) / 3)*/
.box {
  width: calc((100% - (1% * (3 - 1))) / 3);
  height: 100px; /* changed */
  /* pure decoration... */
  box-shadow: 0 0 10px black inset;
  background: green;
}

.box:nth-child(n+4) {
  margin-top: 1%; /*added*/
}

.box:not(:nth-child(3n)):not(:last-child) {
  margin-right: 1%;
}
<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

<hr>

<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

<hr>

<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Чехол на 5 в ряд

Давайте возьмем margin-right: 5% => .box width: calc((100% - (5% * (5 - 1))) / 5)

.boxes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  border: dotted black 1px; /* to see edges */
}

/* width: calc((100% - (<margin_value> * (5 - 1))) / 5) */
.box {
  width: calc((100% - (5% * (5 - 1))) / 5);
  height: 100px; /* changed */
  /* pure decoration... */
  box-shadow: 0 0 10px black inset;
  background: green;
}

.box:nth-child(n+6) {
  margin-top: 5%; /*added*/
}

.box:not(:nth-child(5n)):not(:last-child) {
  margin-right: 5%;
}
<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

<hr>

<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

<hr>

<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Кейс для 4 в ряд и небольших фиксированных пропусков ( значение поля составляет 4 пикселя)

=> .box width:calc((100% - (4px * (4 - 1))) / 4)

.boxes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  border: dotted black 1px; /* to see edges */
}

/* width: calc((100% - (<margin_value> * (4 - 1))) / 4) */
.box {
  width: calc((100% - (4px * (4 - 1))) / 4);
  height: 100px; /* changed */
  /* pure decoration... */
  box-shadow: 0 0 10px black inset;
  background: green;
}

.box:nth-child(n+5) {
  margin-top: 4px; /*added*/
}

.box:not(:nth-child(4n)):not(:last-child) {
  margin-right: 4px;
}
<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

<hr>

<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

<hr>

<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Кейс для 4-х подряд и больших фиксированных пропусков ( значение поля равно 80px)

=> .box width:calc((100% - (80px * (4 - 1))) / 4)

.boxes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  border: dotted black 1px; /* to see edges */
}

/* width: calc((100% - (<margin_value> * (4 - 1))) / 4) */
.box {
  width: calc((100% - (80px * (4 - 1))) / 4);
  height: 100px; /* changed */
  /* pure decoration... */
  box-shadow: 0 0 10px black inset;
  background: green;
}

.box:nth-child(n+5) {
  margin-top: 80px; /*added*/
}

.box:not(:nth-child(4n)):not(:last-child) {
  margin-right: 80px;
}
<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

<hr>

<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

<hr>

<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Чехол для 4-х рядов и фиксированной ширины коробки (60px)

=> margin-right: calc((100% - 60px * 4) / (4 - 1)). 

.boxes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  border: dotted black 1px; /* to see edges */
}

/* margin-rigth: calc((100% - <.box_width_value> * 4) / (4 - 1)) */
.box {
  width: 60px;
  height: 100px; /* changed */
  /* pure decoration... */
  box-shadow: 0 0 10px black inset;
  background: green;
}

.box:nth-child(n+5) {
  margin-top: calc((100% - 60px * 4) / (4 - 1)); /*added*/
}

.box:not(:nth-child(4n)):not(:last-child) {
  margin-right: calc(33.33% - 80px);
}
<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

<hr>

<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

<hr>

<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
1 голос
/ 06 февраля 2020

Вы захотите добавить свойство justify-content для центрирования полей, а align-content должно быть space-around. 

.boxes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: space-around;
}

Для стилей блоков вам потребуется поле вокруг них. разметить их.

Вот кодекс рабочей версии: https://codepen.io/usmanity/pen/zYGYrgZ?editors=0100

0 голосов
/ 06 февраля 2020 
Please try this - 
    <ul class="boxes">
        <li class="box"></li>
        <li class="box"></li>
        <li class="box"></li>
        <li class="box"></li>
        <li class="box"></li>
        <li class="box"></li>
        <li class="box"></li>
      </ul>

    ul.boxes {
      margin: 0 -10px;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }

    ul li.box {
      width: calc(100%/4 - 20px);
      background-color: green;
      height: 200px;
      margin: 0 10px 20px;
    }
0 голосов
/ 06 февраля 2020

Проверьте здесь 

.boxes {
  display: flex;
  flex-wrap: wrap;

  /*edited*/
  justify-content: center;
}
.box {
  width: 23%;
  height: 13rem;
  box-shadow: 0 0 10px black inset;
  background: green;

  /*edited*/
  margin: 1%; /* or .5rem*/
  border-radius: .2rem;

enter image description here

Спасибо

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...