frontend-docs/docs/html-css/02-flex-grid.md

sidebar_position

sidebar_position
2

Сетка flexbox, grid

Источник: DeepSeek

Flexbox

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

Основные концепции Flexbox

Flexbox работает с двумя основными сущностями:

1. Flex Container (контейнер) — элемент, который содержит дочерние элементы (flex items). Чтобы сделать элемент flex-контейнером, нужно задать ему свойство display: flex или display: inline-flex.
2. Flex Items (элементы) — дочерние элементы внутри flex-контейнера.

Преимущества Flexbox:

• Простое создание адаптивных макетов.
• Легкое выравнивание элементов по горизонтали и вертикали.
• Гибкость в управлении размерами и порядком элементов.

Когда использовать Flexbox:

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

Grid

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

Основные концепции Grid

1. Grid Container (контейнер) — элемент, который содержит дочерние элементы (grid items). Чтобы сделать элемент grid-контейнером, нужно задать ему свойство display: grid или display: inline-grid.
2. Grid Items (элементы) — дочерние элементы внутри grid-контейнера.
3. Grid Lines (линии) — линии, которые разделяют строки и столбцы. Они могут быть пронумерованы или названы.
4. Grid Tracks (дорожки) — пространство между двумя соседними линиями (строки или столбцы).
5. Grid Cells (ячейки) — пересечение строки и столбца (минимальная единица сетки).
6. Grid Areas (области) — прямоугольные области, состоящие из одной или нескольких ячеек.

Преимущества Grid:

• Полный контроль над строками и столбцами.
• Простое создание сложных макетов.
• Гибкость в управлении размерами и расположением элементов.

Когда использовать Grid:

• Для создания двумерных макетов (например, страницы с боковой панелью, заголовком и футером).
• Когда нужно точно контролировать расположение элементов.
• Для создания адаптивных интерфейсов с минимальным количеством медиазапросов.