Переменная сетка FlexBox - Web-Global: Связывая миры через веб-технологии
Web-Global

Переменная сетка FlexBox

Пост опубликован 10 января 2022 в 15:36 и находится в рубриках HTML&CSS. 207
Поделиться:

Шаблон макета, который я использую в обзоре своего блога, заключается в создании сетки с некоторыми изменениями: после каждой строки из двух элементов одинакового размера есть один элемент, занимающий всю строку:

Для достижения этой цели нам необходимо:

  1. Установить flex-wrap: wrapв контейнере (или все itemsбудет отображаться в одной строке)
  2. Установите justify-content: space-betweenв контейнере, чтобы создавать пространство только между элементами (а не между краем родительского элемента и элементами).
  3. Установите для каждого элемента widthзначение 49%(или что-то подобное, равное или меньшее, чем 50%)
  4. Установите значение для каждого третьего элементаwidth100%, чтобы он заполнял всю строку. Мы можем выбрать каждый третий элемент в списке с nth-child()помощью селектора.
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.item {
  width: 48%;
  height: 100px;
  margin-bottom: 2%;
}

.item:nth-child(3n) {
  width: 100%;
}

Если вы хотите, чтобы первая строка была во всю ширину, а два следующих элемента имели общую строку, обратите внимание, что вы не можете писать.item:nth-child(1n) { width: 100% }-это будет нацелено на все элементы. Вы должны нацелиться на первый элемент, выбрав каждый третий элемент, а затем отступив на два пункта: .item:nth-child(3n-2) { width: 100% }.