Что такое Flexbox?

Flexbox (сокращенно от Flexible Box) — это способ организации элементов в строках или столбцах, с возможностью их растягивания или сжатия. Проще говоря, это инструмент, который позволяет гибко управлять расположением элементов.

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

Как работает Flexbox?

Основные элементы Flexbox:

Контейнер (где находятся все элементы, которые нужно расположить).

Элементы внутри контейнера (это те самые игрушки, которые вы хотите разместить).

Свойства Flexbox:

display: flex; — говорит браузеру, что контейнер будет использовать Flexbox для распределения элементов внутри себя.

justify-content — управляет расположением элементов по основной оси (например, по горизонтали).

align-items — управляет выравниванием элементов по вертикали.

flex — задает гибкость каждому элементу, позволяя ему растягиваться или сжиматься.

Пример Flexbox:

Предположим, у нас есть блок с тремя квадратами, которые мы хотим выстроить в строку.

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

CSS с Flexbox:

.container {
  display: flex; /* Делаем контейнер гибким */
  justify-content: space-between; /* Распределяем элементы с равными промежутками */
}

Основные свойства Flexbox:

• justify-content: Управляет выравниванием элементов по главной оси (горизонтально).

  • flex-start (по умолчанию): элементы прижимаются к началу.

  • flex-end: элементы прижимаются к концу.

  • center: элементы выравниваются по центру.

  • space-between: элементы равномерно распределяются с промежутками между ними.

  • space-around: элементы равномерно распределяются с промежутками вокруг них.

  • align-items: Управляет выравниванием элементов по поперечной оси (вертикально).

• stretch (по умолчанию): элементы растягиваются на всю высоту контейнера.

  • flex-start: элементы прижимаются к верху.

  • flex-end: элементы прижимаются к низу.

  • center: элементы выравниваются по центру.

• flex-direction: Определяет направление главной оси.

  • row (по умолчанию): элементы располагаются в строку.

  • column: элементы располагаются в столбец.

  • row-reverse: элементы располагаются в строку в обратном порядке.

  • column-reverse: элементы располагаются в столбец в обратном порядке.

• flex-wrap: Позволяет элементам переноситься на новую строку, если они не помещаются.

  • nowrap (по умолчанию): элементы не переносятся.

  • wrap: элементы переносятся на новую строку.

  • wrap-reverse: элементы переносятся на новую строку в обратном порядке.

Что такое Grid?

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

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

Как работает Grid?

Основные элементы Grid:

Контейнер (который будет разделен на строки и столбцы).

Ячейки (элементы, которые мы будем размещать в сетке).

Свойства Grid:

display: grid; — активирует режим сетки на контейнере.

grid-template-columns и grid-template-rows — задают количество столбцов и строк в сетке.

grid-column и grid-row — позволяют элементам занимать несколько строк или столбцов.

gap — управляет расстоянием между элементами.

Пример Grid:

Теперь давайте разместим три квадрата в сетке, состоящей из двух столбцов и двух строк.

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

CSS с Grid:

.container {
  display: grid; /* Делаем контейнер сеткой */
  grid-template-columns: 1fr 1fr 1fr; /* Три колонки равной ширины */
  gap: 10px; /* Расстояние между элементами */
}

Основные свойства Grid:

• grid-template-columns и grid-template-rows: Определяют количество и размеры столбцов и строк.

  • 1fr: единица измерения, которая означает "одна часть доступного пространства".

  • Пример: grid-template-columns: 1fr 2fr 1fr; — три колонки, где средняя в два раза шире крайних.

• gap: Задает расстояние между элементами сетки.

  • Пример: gap: 10px; — расстояние 10 пикселей между элементами.

• grid-column и grid-row: Позволяют элементам занимать несколько ячеек.

  • Пример: grid-column: 1 / 3; — элемент занимает две колонки (от первой до третьей).

• justify-items и align-items: Управляют выравниванием элементов внутри ячеек.

  • start: элементы прижимаются к началу.

  • end: элементы прижимаются к концу.

  • center: элементы выравниваются по центру.

  • stretch: элементы растягиваются на всю ячейку.

• justify-content и align-content: Управляют выравниванием всей сетки внутри контейнера.

  • Пример: justify-content: center; — сетка выравнивается по центру контейнера.

Чем Flexbox и Grid отличаются?

Flexbox — это инструмент для одномерных макетов, где элементы расположены в одну строку или столбец.

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

Flexbox удобен, когда нужно гибко располагать элементы в одном направлении (например, на главной панели сайта).

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

Когда использовать Flexbox, а когда Grid?

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

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