Свойства Flex-контейнера CSS
Эти свойства задаются для самого элемента flex-контейнера:
display— требует значенияflexилиinline-flexflex-direction— выбирает направление, в котором располагаются flex-элементыflex-wrap— решает, могут ли flex-элементы переноситьсяflex-flow— сокращённая запись, объединяющаяflex-directionиflex-wrapjustify-content— позиционирует flex-элементы вдоль главной оси (горизонтально), когда они оставляют часть её пространства незанятойalign-items— позиционирует flex-элементы вдоль поперечной оси (вертикально), когда они оставляют часть её пространства незанятойalign-content— позиционирует flex-линии, когда элементы переносятся и на поперечной оси есть дополнительное пространство
Свойство CSS flex-direction
Используйте flex-direction, чтобы выбрать, в какую сторону идут элементы внутри flex-контейнера. Четыре возможных значения:
row(по умолчанию)columnrow-reversecolumn-reverse
Направление row
При значении row, которое применяется по умолчанию, flex-элементы располагаются рядом друг с другом слева направо.
Prompt
Создайте flex-контейнер с тремя пронумерованными элементами (1, 2, 3), используя flex-direction: row. У контейнера должен быть фон DodgerBlue, а у каждого элемента — белый фон, отступ (margin) 10px, внутренний отступ (padding) 20px и размер шрифта 30px.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex Direction Row</title>
<style>
.flex-container {
display: flex;
flex-direction: row;
background-color: DodgerBlue;
}
.flex-container div {
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
}
</style>
</head>
<body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
Направление column
При значении column flex-элементы располагаются вертикально, начиная сверху и заканчивая снизу.
Prompt
Создайте flex-контейнер с тремя пронумерованными элементами (1, 2, 3), используя flex-direction: column. У контейнера должен быть фон DodgerBlue, а у каждого элемента — белый фон, отступ (margin) 10px, внутренний отступ (padding) 20px и размер шрифта 30px.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex Direction Column</title>
<style>
.flex-container {
display: flex;
flex-direction: column;
background-color: DodgerBlue;
}
.flex-container div {
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
}
</style>
</head>
<body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
Обратное направление row
По-прежнему горизонтально, но row-reverse располагает flex-элементы справа налево.
Prompt
Создайте flex-контейнер с тремя пронумерованными элементами (1, 2, 3), используя flex-direction: row-reverse. У контейнера должен быть фон DodgerBlue, а у каждого элемента — белый фон, отступ (margin) 10px, внутренний отступ (padding) 20px и размер шрифта 30px.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex Direction Row Reverse</title>
<style>
.flex-container {
display: flex;
flex-direction: row-reverse;
background-color: DodgerBlue;
}
.flex-container div {
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
}
</style>
</head>
<body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
Обратное направление column
По-прежнему вертикально, но column-reverse располагает flex-элементы снизу вверх.
Prompt
Создайте flex-контейнер с тремя пронумерованными элементами (1, 2, 3), используя flex-direction: column-reverse. У контейнера должен быть фон DodgerBlue, а у каждого элемента — белый фон, отступ (margin) 10px, внутренний отступ (padding) 20px и размер шрифта 30px.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex Direction Column Reverse</title>
<style>
.flex-container {
display: flex;
flex-direction: column-reverse;
background-color: DodgerBlue;
}
.flex-container div {
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
}
</style>
</head>
<body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
Свойство CSS flex-wrap
Когда на одной flex-линии слишком мало места для всех элементов, flex-wrap решает, переходят ли они на следующие линии. Вы можете выбрать:
nowrap(по умолчанию)wrapwrap-reverse
Без переноса
По умолчанию nowrap держит все flex-элементы на одной линии, без переноса.
Prompt
Создайте flex-контейнер с девятью пронумерованными элементами (от 1 до 9), используя flex-wrap: nowrap. У контейнера должен быть фон DodgerBlue и ширина 200px. У каждого элемента должен быть белый фон, отступ (margin) 10px, внутренний отступ (padding) 20px и размер шрифта 30px.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex Wrap Nowrap</title>
<style>
.flex-container {
display: flex;
flex-wrap: nowrap;
width: 200px;
background-color: DodgerBlue;
}
.flex-container div {
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
}
</style>
</head>
<body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
</html>
Перенос
При значении wrap flex-элементы переходят на новые линии, когда это необходимо.
Prompt
Создайте flex-контейнер с девятью пронумерованными элементами (от 1 до 9), используя flex-wrap: wrap. У контейнера должен быть фон DodgerBlue и ширина 200px. У каждого элемента должен быть белый фон, отступ (margin) 10px, внутренний отступ (padding) 20px и размер шрифта 30px.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex Wrap Wrap</title>
<style>
.flex-container {
display: flex;
flex-wrap: wrap;
width: 200px;
background-color: DodgerBlue;
}
.flex-container div {
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
}
</style>
</head>
<body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
</html>
Обратный перенос
При значении wrap-reverse flex-элементы тоже переходят на новые линии, когда это необходимо, только в обратном порядке.
Prompt
Создайте flex-контейнер с девятью пронумерованными элементами (от 1 до 9), используя flex-wrap: wrap-reverse. У контейнера должен быть фон DodgerBlue и ширина 200px. У каждого элемента должен быть белый фон, отступ (margin) 10px, внутренний отступ (padding) 20px и размер шрифта 30px.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex Wrap Reverse</title>
<style>
.flex-container {
display: flex;
flex-wrap: wrap-reverse;
width: 200px;
background-color: DodgerBlue;
}
.flex-container div {
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
}
</style>
</head>
<body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
</html>
Свойство CSS flex-flow
Вместо того чтобы писать flex-direction и flex-wrap по отдельности, вы можете задать оба в одной строке с помощью сокращённого свойства flex-flow.
Пример
Prompt
Создайте flex-контейнер с тремя пронумерованными элементами (1, 2, 3), используя сокращённое свойство flex-flow со значением «row wrap». У контейнера должен быть фон DodgerBlue, а у каждого элемента — белый фон, отступ (margin) 10px, внутренний отступ (padding) 20px и размер шрифта 30px.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex Flow</title>
<style>
.flex-container {
display: flex;
flex-flow: row wrap;
background-color: DodgerBlue;
}
.flex-container div {
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
}
</style>
</head>
<body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
Дополнительные страницы о Flex-контейнере
Ещё две страницы продолжают тему свойств flex-контейнера:
justify-content— горизонтальное выравнивание flex-элементовalign-itemsиalign-content— вертикальное выравнивание и точное центрирование