Flexbox был представлен в 2009 году как новая технология для облегчения создания адаптивных веб-страниц и более удобной организации элементов на них, и с тех пор он получает все большее и большее распространение. В данный момент он используется как основной инструмент вёрстки для современных веб-страниц.

Flexbox - это одномерная система вёрстки, которую мы можем использовать для установления элементов по оси строки или столбца, что упрощает нашу жизнь при проектировании и создании адаптивных веб-страниц без использования хитрых приемов и множества свойств float и position в наших стилях CSS.

Чтобы начать использовать Flexbox, все, что вам нужно сделать, это создать «гибкий» контейнер с помощью свойства display: flex. После этого каждый элемент, который у вас есть внутри этого гибкого контейнера, превращается в гибкий элемент. 

Основное направление, которое наши Flex элементы принимают в контейнере - это строка.

Мы можем легко изменить направление наших Flex элементов в контейнере из строки на столбец, передав свойство: flex-direction: column

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

Например, представим, что у нас есть div элемент, а внутри у div есть три элемента с одинаковой шириной и высотой:

<div id="container">
  <div id="one">1</div>
  <div id="two">2</div>
  <div id="three">3</div>
</div>

В нашем CSS мы используем Flexbox для упорядочивания и выравнивания наших элементов:

#container
{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  padding: 10px;
}

#one,
#two, 
#three
{
  width: 200px;
  height: 100%;
  background: red;
}

Мы можем легко изменить порядок элементов, используя свойство order. Если бы мы хотели изменить порядок элементов с помощью id  #two, мы бы сделали это:

#two
{
  order: 3;
}

Теперь наш элемент является последним в Flex контейнере. Это некоторые из функций, которые нам предоставил Flexbox, и они очень полезны для стилизации и выравнивания элементов.

Теперь, когда мы знаем, что Flexbox - это система одномерной вёрстки, давайте вкратце разберемся, как работает CSS-Grid и различия между этими системами вёрстки.

CSS Grid

Если Flexbox является мощной системой вёрстки, но она одномерна (это означает, что мы можем работать со строками или столбцами), то CSS Grid на данный момент считается наиболее мощной доступной системой верстки.

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

Чтобы определить «сетчатый» контейнер, все, что вам нужно сделать, это передать свойство вашему “display: grid” элементу блока. Теперь у вас есть сетка, поэтому вы должны определить, сколько строк и столбцов вы хотите.

Для создания строк вы используете свойство “grid-template-rows” и задаёте их столько раз, сколько хотите, вот так:

grid-template-rows: 200px 200px;

Для создания столбцов - это почти то же самое - мы используем свойство grid-template-columns:

grid-template-columns: 200px  200px;

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

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

CSS Grid предназначена для компоновки, Flexbox - для выравнивания.

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

Flexbox помог разработчикам начать создавать более отзывчивые и удобные в обслуживании веб-приложения, но основная идея одномерной системы компоновки не имеет смысла, когда вам нужно создать вёрстку с более сложным дизайном.

CSS Grid дала нам возможность создавать более сложную вёрстку, используя двумерный способ, используя как строки, так и столбцы. Мы должны стремиться использовать их оба вместе, но для разных целей. Для формирования структуры веб-страницы используйте CSS Grid, для выравнивания элементов используйте Flexbox.

Вы должны рассмотреть возможность использования Flexbox, когда:

  1. У вас небольшой проект — Flexbox идеально подходит, когда у вас небольшой дизайн вёрстки для реализации, с несколькими строками или несколькими столбцами;
  2. Вам нужно выровнять элементы — Flexbox идеально подходит для этого, единственное, что мы должны сделать, это создать гибкий контейнер, используя display: flex а затем задать направление дочерних элементов, которое мы хотим;
  3. Вы создаёте страницу по черновому дизайну — Flexbox - это идеальная система компоновки для создания веб-страниц, если вы точно не знаете, как будет выглядеть ваш контент, поэтому, если вы хотите, чтобы всё просто соответствовало, Flexbox идеально подходит для этого.

Конечно, вы можете создать все свое приложение, используя только Flexbox, и получить тот же результат, как если бы вы создавали с помощью CSS grid, это совершенно нормально. Но для лучшего подхода к CSS, для более краткого, хорошо написанного и удобного в обслуживании приложения в долгосрочной перспективе, для идеального создания и подгонки вашего макета идеальным методом является использование CSS Grid.

CSS Grid лучше, когда:

  1. У вас сложный проект — когда у нас есть сложные проекты для реализации, тогда и проявляется магия CSS grid. Система двумерной компоновки здесь идеально подходит для создания вёрстки со сложным дизайном, мы можем использовать ее в наших интересах для создания более сложных и удобных в обслуживании веб-страниц;
  2. Вам нужно иметь зазор между элементами блока — еще одна вещь, которая очень полезна в CSS Grid, которой у нас нет во Flexbox, - это свойство gap. Мы можем легко определить разрыв между нашими строками или столбцами, не используя свойство margin, которое может вызвать некоторые побочные эффекты, особенно если мы работаем со многими точками останова;
  3. Вам нужно перекрывать элементы — перекрывать элементы с помощью CSS Grid очень просто, вам просто нужно использовать свойства grid-column и grid-row, и вы можете очень легко создавать перекрывающиеся элементы. С другой стороны, с Flexbox нам все еще нужно использовать некоторые хаки, такие как поля, преобразования или абсолютное позиционирование;
  4. Вы верстаете по дизайну впервые — когда у вас уже есть структура и дизайн будущей вёрстки, её проще создавать с помощью CSS Grid, и система двумерного макета очень помогает нам, когда мы можем использовать строки и столбцы вместе и располагать элементы так, как мы хотим;

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

CSS Grid предназначена для верстки, Flexbox - для выравнивания

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

У нас есть верхний колонтитул, боковое меню, содержимое основного блока и нижний колонтитул. Чтобы создать этот макет с помощью CSS Grid, нам просто нужно создать наши элементы:

<div id="container">
  <header>Header</header>
  <aside>Aside</aside>
  <main>Main</main>
  <footer>Footer</footer>
</div>

А теперь создадим наш сеточный контейнер, используя display: grid, а затем создадим несколько строк и столбцов, например:

#container {
  width: 100%;
  height: 100vh;
  background: yellow;
  display: grid;
  grid-template-rows: 80px 600px 80px;
  grid-template-columns: 0.5fr 1fr;
}

header {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
  background: blue;
}

aside {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  background: green;
}

main {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
  background: pink;
}

footer {
  grid-column: 1 / 3;
  grid-row: 3

/ 4;
  background: yellow;
}

Вот и все. Используя только 30 строк CSS, мы создаём наш дизайн очень просто, без необходимости использовать такие хаки, как float или позиционирование наших элементов и без необходимости создавать много гибких контейнеров.

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

Давайте возьмём наш пример и используем как CSS Grid, так и Flexbox, чтобы показать мощь обеих систем компоновки вместе. Внутри нашего header, мы собираемся создать три div элемента, и мы собираемся выровнять их в ряд.

Для этого всё, что нам нужно сделать, это объявить наш header гибким контейнером с помощью свойства display: flex, указать направление оси как строки (flex-direction: row) и выровнять элементы.

header {
  column: 1  ;
  row: 1  ;
  background: blue;
  display:;
  -direction: row;
  alignitems: center;
  justifycontent:-;
  padding: ;
}

Мощная веб-страница, использующая CSS Grid для верстки и Flexbox для выравнивания.

Для основного стиля макета вы можете использовать CSS Grid, поскольку это двумерная система компоновки, вы можете очень легко работать как со строками, так и со столбцами. А для более простого стиля компоновки вы можете использовать Flexbox, одномерную систему, очень полезную при работе со строками.

Вывод

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

Share with friends:

Facebook Twitter Vkontakte