49 lines
3.7 KiB
Markdown
49 lines
3.7 KiB
Markdown
---
|
||
sidebar_position: 2
|
||
---
|
||
|
||
# Сетка flexbox, grid
|
||
|
||
Предназначены для создания гибких и адаптивных макетов.
|
||
|
||
## Flexbox
|
||
Flexbox — это одномерная система компоновки, предназначенная для выравнивания элементов по одной оси (горизонтально или вертикально).
|
||
|
||
#### Основные концепции Flexbox
|
||
|
||
Flexbox работает с двумя основными сущностями:
|
||
1. **Flex Container** (контейнер) — элемент, который содержит дочерние элементы (flex items). Чтобы сделать элемент flex-контейнером, нужно задать ему свойство `display: flex` или `display: inline-flex`.
|
||
2. **Flex Items** (элементы) — дочерние элементы внутри flex-контейнера.
|
||
|
||
#### Преимущества Flexbox:
|
||
- Простое создание адаптивных макетов.
|
||
- Легкое выравнивание элементов по горизонтали и вертикали.
|
||
- Гибкость в управлении размерами и порядком элементов.
|
||
|
||
#### Когда использовать 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:
|
||
- Для создания двумерных макетов (например, страницы с боковой панелью, заголовком и футером).
|
||
- Когда нужно точно контролировать расположение элементов.
|
||
- Для создания адаптивных интерфейсов с минимальным количеством медиазапросов.
|
||
|
||
🚀 **_Источник: DeepSeek_** |