Ultimate CSS Battle: Grid VS Flexbox

внешний интерфейс CSS
Ultimate CSS Battle: Grid VS Flexbox

За последние несколько лет,FlexboxОн стал самым популярным фреймворком компоновки во внешнем интерфейсе, что неудивительно, потому что мы можем легко использовать его для выравнивания элементов.

Однако в передней деревне есть еще один, называемыйGridребенок, он иFlexboxЕсть много функциональных сходств, некоторые из которых болееFlexboxЭто хорошо, но есть и недостатки.

Это также станет местом борьбы разработчиков, что им следует использовать? В этой статье мы сравним два модуля на макро- и микроуровнях.

1D против 2D

Flexboxдля одномерного макета,Gridдля 2D макета

Это означает, что если вы размещаете только в одном направлении (например, размещаете три кнопки внутри заголовка), вам нужно использоватьFlexbox

img

он будетGridБолее гибкий, может быть реализован с меньшим количеством кода и проще в обслуживании.

Однако, если вы собираетесь создать полный макет в обоих измерениях, используя как строки, так и столбцы, вам следует использоватьGrid

двухмерный

img

при этих обстоятельствах,Gridбудет более гибким, упростит ваши теги и упростит поддержку кода.

Вы можете использовать комбинацию обоих, в приведенном выше примере идеальный способ сделать это - использоватьGridдля разметки страницы используйтеFlexboxЧтобы выровнять содержимое в шапке.

Сначала контент против макета

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

Мы будем использовать заголовок, упомянутый в предыдущем абзаце, HTML-код которого выглядит следующим образом:

<header>
  <div>Home</div>
  <div>Search</div>
  <div>Logout</div>
</header>

В использованииFlexboxРаньше элементы div внутри располагались друг над другом:

img

Flexbox header

когда мы добавилиdisplay:flexПосле этого они будут красиво ложиться в линию.

header {
  display:flex;
}

img

Чтобы сделать кнопку выхода справа, мы просто назначаем ей поле:

header > div:nth-child(3) {
  margin-left: auto;
}

Эффект следующий:

img

Стоит отметить: пусть элемент сам решает, где его разместить, мы, кромеdisplay: flexНе добавляйте ничего снаружи.

ЭтоFlexboxа такжеGridОсновное отличие, когда мы используемGridЧтобы создать этот заголовок, разница будет более очевидной.

несмотря на использованиеGridСоздание одномерного заголовка — плохая идея, но реализация его в этой статье — хорошее упражнение, потому что оно учит насFlexboxа такжеGridосновное отличие

Grid header

При использованииGridТам будет множество способов. Я собираюсь сделать очень простой, нашGridЕсть десять столбцов, каждый шириной в одну единицу.

header {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
}

он смотрит иFlexboxто же решение, что и

img

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

img

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

Этот способ заставил нас разделить наш заголовк столбцов номер

Если мы не изменимGrid, иначе мы застряли бы с 10 столбцами, но вFlexboxНас не побеспокоит эта беда.

Чтобы вывести выход из системы справа, мы поместим его в десятый столбец:

header > div:nth-child(3) {
  grid-column: 10;
}

При осмотре элемента это выглядит так:

img

Мы не можем просто добавитьmargin-left: auto;Поскольку он уже находится в третьей ячейке, чтобы переместить его, мы должны найти другую ячейку, чтобы поставить ее.

Связывать

Теперь давайте посмотрим, как использовать обаGridа такжеFlexboxЧтобы включить заголовок в наш макет, давайте сначала создадим макет.

img

Теги следующие:

<div class="container">
  <header>HEADER</header>
  <aside>MENU</aside>
  <main>CONTENT</main>
  <footer>FOOTER</footer>
</div>

И затем CSS:

.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 50px 350px 50px;
}

поместить элемент вGrid:

header {
  grid-column: span 12;
}
aside {
  grid-column: span 2;
}
main {
  grid-column: span 10;
}
footer {
  grid-column: span 12;
}

Все, что нужно, это выложить шапку: ставим изGridЭлементы преобразуются вFlexboxконтейнер.

header {
  display: flex;
}

Теперь ставим logout справа:

header > div:nth-child(3) {
  margin-left: auto;
}

Теперь мы оба используемGridа такжеFlexboxидеальная планировка. Вот два контейнера:

img

Итак, теперь вы должны понятьFlexboxа такжеGridРазница, но также знаю, как объединить два.

Поддержка браузера

До истечения срока этой статьи 77% веб-сайтов с трафиком в мире поддерживалиGrid, это число продолжает расти.

Я верю, что 2018 год будетGridгоду он совершит прорыв и станет обязательным навыком для фронтенд-разработчиков, как и в прошлые несколько летFlexboxТакой же.

Категории