Flexbox определяет набор свойств, для контейнера и его дочерних элементов.
В начале добавляем контейнеру display: flex, например так:
index.html:
<div class="container">
<div class="header"></div>
<div class="main"></div>
<div class="footer"></div>
</div>style.css:
.container {
display: flex;
}Главная и поперечная ось
- Главная ось – направление в соответствии с которым располагаются все дочерние элементы
- Поперечная ось – направление перпендикулярное главной оси
Главная ось в по умолчанию располагается слева направо, для языков которые пишутся с лева на право. Поперечная сверху вниз.
Задать направление можно при помощи flex-direction:
Доступные значения flex-direction:
- row – слева направо (для rtl – наоборот)
- row-reverse – справа налево (для rtl – наоборот)
- column – сверху вниз
- column-reverse – снизу вверх
Правила для родительского контейнера
justify-content – выравнивание по главной оси
Доступные значения:
- flex-start – блоки прижаты к началу главной оси
- flex-end – блоки прижаты к концу главной оси
- center – блоки располагаются в центре главной оси
- space-between – первый блок располагается в начале главной оси, последний блок – в конце, все остальные блоки равномерно распределены в оставшемся пространстве
- space-around – все блоки равномерно распределены вдоль главной оси, разделяя все свободное пространство поровну
align-items – выравнивание по поперечной оси
Доступные значения:
- flex-start – блоки прижаты к началу поперечной оси
- flex-end – блоки прижаты к концу поперечной оси
- center – блоки располагаются в центре поперечной оси
- baseline – блоки выровнены по их базовой линии
- stretch – блоки растянуты, занимая все доступное место по поперечной оси, если заданы min-width или max-width, то они учитываются
flex-wrap – многострочная организация блоков внутри контейнера
Доступные значения:
- nowrap – (по умолчанию) блоки располагаются в одну линию с лева на право (или наоборот если rtl)
- wrap – блоки располагаются в несколько рядов, если не помещаются в одну линию.
- wrap-reverse – тоже самое что и wrap, но в обратном порядке.
flex-flow – сокращение для flex-direction и flex-wrap
Например так:
flex-flow: column wrap;align-content – как ряды блоков будут выровнены по вертикали
align-content – работает только в многострочном режиме.
Доступные значения:
- flex-start – ряды блоков будут прижаты к началу контейнера
- flex-end – ряды блоков будут прижаты к концу контейнера
- center – ряды блоков будут находится в центре контейнера
- space-between – первый ряд в начале, последний ряд в конце, остальные равномерно
- space-around – будут распределены равномерно
- stretch – (по умолчанию) ряды блоков растянуты, дабы занять все имеющееся пространство.
Правила css для дочерних элементов flex-контейнера
flex-basis – базовый размер отдельно взятого flex-блока
Задаваться может в любой единице измерения длины или auto
flex-grow – жадность flex-блока
по умолчанию 0
flex-shrink – фактор сжимаемости блока
по умолчанию равен 1
flex – короткая запись для flex-grow, flex-shrink и flex-basis
align-self – выравнивание отдельного блока по поперечной оси
Доступные значения:
- flex-start – прижать к началу поперечной оси
- flex-end – прижать к концу поперечной оси
- center – расположить в центре поперечной оси
- baseline – выровнять по базовой линии
- stretch – (по умолчанию) растянут, при этом учитываются min-width и max-width
order – порядок следования отдельно взятого блока внутри контейнера
По умолчанию 0, задается целым числом. Определяет вес позиции элемента.
Для flex margin: auto работает и для вертикали
Прижимаем подвал к низу страницы с помощью flex:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Флексики</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<header class="header">
<h1>Шапка</h1>
</header>
<div class="content">
Контент
</div>
<footer class="footer">
<p>Подвал</p>
</footer>
</body>
</html>style.css
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.content {
flex: 1 0 auto;
}
.footer {
flex-shrink: 0;
border: 1px solid green;
}