Flexbox
↑ 1.3 CSS и SASS · ← Предыдущая · → Следующая
Зачем это на собесе
Flexbox — основной инструмент одномерной раскладки; спрашивают оси,
flex: 1и центрирование.
Объяснение
Flex-контейнер раскладывает элементы вдоль главной оси (flex-direction), поперёк — поперечная ось.
| Свойство контейнера | Значение |
|---|---|
display: flex | включить |
flex-direction | row / column / *-reverse |
justify-content | по главной оси: flex-start, center, space-between, space-around, space-evenly |
align-items | по поперечной: stretch, center, flex-start, baseline |
flex-wrap | nowrap / wrap |
gap | промежутки |
align-content | строки при wrap |
| Свойство элемента | Значение |
|---|---|
flex-grow | доля свободного места |
flex-shrink | как сжимается при нехватке |
flex-basis | базовый размер |
flex: 1 | 1 1 0% — занять всё свободное место поровну |
align-self, order | индивидуальное выравнивание, порядок |
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.center { display: flex; place-content: center; min-height: 100vh; } /* центрирование */
.sidebar { flex: 0 0 240px; }
.content { flex: 1; min-width: 0; } /* min-width: 0 позволяет сжиматься длинному содержимому */Нюансы и подводные камни
- У flex-элементов
min-width: auto— длинный текст/preне сжимается: нуженmin-width: 0иoverflow. margin: autoвнутри flex поглощает свободное место (удобно для «оттолкнуть» элемент).flex-basisприоритетнееwidthв главной оси.gapподдерживается во flex во всех современных браузерах.- Для двумерной раскладки используйте Grid.
Практика
- Сверстайте шапку: логотип слева, меню по центру, кнопки справа.
- Сделайте «липкий» футер с
min-heightиflex: 1. - Воспроизведите и исправьте проблему с длинным текстом в flex-элементе.
Вопросы с ответами
Что значит
flex: 1?Элемент растёт и сжимается, занимая равную долю свободного места (
1 1 0%).
Как отцентрировать элемент по обеим осям?
display: flex; justify-content: center; align-items: center;(илиplace-content: center).