Энциклопедия CSS: display:flex
display: flex — значение CSS-свойства display, которое включает flexbox-модель для элемента.
После применения display: flex; элемент становится flex-контейнером, а его дочерние элементы — flex-элементами. Это удобно для размещения блоков в ряд, выравнивания элементов и создания адаптивных интерфейсов.
Синтаксис
selector {
display: flex;
}
Пример:
.container {
display: flex;
}
В этом случае дочерние элементы контейнера будут располагаться по flex-правилам.
Расположение элементов
По умолчанию flex-элементы располагаются в строку слева направо:
.container {
display: flex;
flex-direction: row;
}
Направление можно изменить с помощью flex-direction:
row— в строку;row-reverse— в строку в обратном порядке;column— в колонку;column-reverse— в колонку в обратном порядке.
Выравнивание
Для выравнивания элементов внутри flex-контейнера часто используют два свойства:
justify-content— выравнивание вдоль главной оси;align-items— выравнивание по поперечной оси.
Пример:
.container {
display: flex;
justify-content: center;
align-items: center;
}
Такой код размещает элементы по центру контейнера.
Расстояние между элементами
Для отступов между flex-элементами удобно использовать gap:
.container {
display: flex;
gap: 12px;
}
Это проще, чем задавать отдельные margin для каждого элемента.
Перенос строк
По умолчанию flex-элементы стараются оставаться в одной строке. Чтобы разрешить перенос, используют flex-wrap:
.container {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
Такой вариант полезен для карточек, тегов, кнопок и других элементов, которые должны адаптироваться к ширине экрана.
Живой пример
Частый пример
Flexbox часто используют для размещения двух блоков рядом:
.layout {
display: flex;
gap: 20px;
}
.sidebar {
width: 240px;
}
.content {
flex: 1;
}
В этом примере боковая колонка получает фиксированную ширину, а основной блок занимает оставшееся место.
Статьи про другие свойства CSS
Энциклопедия CSS | |
|---|---|
| Текст и шрифты: | |
| Размеры и отступы: | |
| Фоновые свойства: | |
| Позиционирование и отображение: | |
| Анимации и переходы: | |
| Границы и тени: | |
| Гриды и флексы: | |
| Прочие свойства: | |
