28
Фев
2019

В чем разница между Flexbox и Grid CSS?

В чем разница между Flexbox и Grid CSS?

От автора: давайте вкратце рассмотрим эту тему и попытаемся ответить без длинных объяснений. Существует много общего между Flexbox и Grid CSS, начиная с того, что они используются для разметки и являются гораздо более мощными, чем любая техника разметки, которая была до них. Они могут растягиваться и сжиматься, они могут центрировать вещи, они могут переупорядочивать вещи, они могут выравнивать вещи…

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

Flexbox можно переносить опционально. Если мы разрешаем переносы во flex-контейнере, элементы будут перенесены на другой ряд, когда заполнят текущий. Место, которое они занимают в следующем ряду, не зависит от того, что произошло в первом ряду, это позволяет нам создавать masonry-макеты.

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

Flexbox сверху, Grid снизу

Вы можете представить себе flexbox как «одномерный». Хотя flexbox может создавать строки и столбцы в том смысле, что он позволяет переносить элементы, нет способа декларативно контролировать, где заканчиваются элементы, поскольку элементы просто смещаются вдоль одной оси, а затем переносятся или не переносятся соответственно. Они делают то, что делают, если хотите, вдоль одномерной плоскости, и это связано с единственным измерением, которое мы можем применить — выровнять элементы вдоль базовой линии. Чего сетка не может.

.parent {
  display: flex;
  flex-flow: row wrap; /* OK элементы, размещайтесь в одну строку, пока будет место, а затем переноситесь */
}

Вы можете представить Grid, как о «двухмерную, в которой мы можем (если хотим) объявить размер строк и столбцов, а затем явно размещать объекты в строках и столбцах по своему усмотрению.

.parent {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr; /* Три колонки, одна из них в три раза шире остальных */
  grid-template-rows: 200px auto 100px; /* Три колонки, две - с явными размерами */
  grid-template-areas:
    "header header header"
    ". main sidebar"
    "footer . .";
}

/*
  Теперь мы можем явно разместить элементы в указанных колонках и рядах.
*/
.child-1 {
  grid-area: header;
}

.child-2 {
  grid-area: main;
}

.child-3 {
  grid-area: sidebar;
}

.child-4 {
  grid-area: footer;
}

Flexbox сверху, Grid снизу

Я не большой поклонник различий между сеткой «1D» и «2D» для Flexbox и Grid, только потому, что по большей части я использую сетку, как «1D», и она отлично подходит для этого. Я бы не хотел, чтобы кто-то подумал, что он должен использовать flexbox, а не grid, потому что grid — это только когда вам нужно 2D. Это является существенным отличием, так как 2D макет можно создать с помощью Grid так, как это нельзя сделать с помощью Flexbox.

Grid в основном определяется для родительского элемента. В flexbox большая часть макета (помимо самых простых) определяется через дочерние элементы.

/*
  Дочерние flex-элементы выполняют основную часть работы
*/
.flexbox {
  display: flex;
  > div {
    &:nth-child(1) { // лого
      flex: 0 0 100px;
    }
    &:nth-child(2) { // поиск
      flex: 1;
      max-width: 500px;
    }
    &:nth-child(3) { // аватар
      flex: 0 0 50px;
      margin-left: auto;
    }
  }
}

/*
  В grid контейнер выполняет основную часть работы
*/
.grid {
  display: grid;
  grid-template-columns: 1fr auto minmax(100px, 1fr) 1fr;
  grid-template-rows: 100px repeat(3, auto) 100px;
  grid-gap: 10px;
}

Grid лучше обрабатывает перекрытия. Чтобы элементы перекрывались во flexbox, необходимо использовать традиционные вещи, такие как отрицательные поля, преобразования или абсолютное позиционирование, чтобы вырваться из поведения flex. С помощью Grid мы можем размещать элементы на перекрывающихся линиях сетки или даже точно в тех же ячейках сетки.

Flexbox сверху, Grid снизу

Сетка устойчивее. Хотя гибкость flexbox иногда является его преимуществом, способ определения размера flex-элемента становится довольно сложным. Это сочетание width, min-width, max-width, flex-basis, flex-grow, и flex-shrink, не говоря уже содержимом внутри и тому подобном white-space, а также других элементах в той же строке. Grid имеет интересные функции растягивания, такие как фракционные единицы, и возможность содержимого разбивать сетки, хотя в целом мы устанавливаем линии сетки и помещаем в них элементы, которые смещаются прямо.

Flexbox может смещать вещи. Это довольно уникальная особенность flexbox, вы можете, например, применить для элемента margin-right: auto;, и, если есть место, этот элемент будет смещать все остальное настолько далеко, насколько это возможно.

Автор: Chris Coyier

Источник: https://css-tricks.com/

Редакция: Команда webformyself.

Источник: https://webformyself.com/v-chem-raznica-mezhdu-flexbox-i-grid-css/
Share

Тебе может это понравится...