Свойство CSS align-items
Положение flex-элементов по вертикали, вдоль поперечной оси, задаёт свойство align-items.
Оно принимает такие значения:
normal(по умолчанию)stretchcenterflex-startflex-endbaseline
Center
Значение center размещает flex-элементы посередине высоты контейнера.
Prompt
Создайте flex-контейнер высотой 200px с тремя пронумерованными flex-элементами. Используйте align-items: center, чтобы выровнять элементы по вертикали по центру. Задайте контейнеру светлый фон, а каждому элементу — свой отдельный цвет фона.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>align-items: center</title>
<style>
.flex-container {
display: flex;
height: 200px;
align-items: center;
background-color: #f1f1f1;
}
.flex-container > div {
width: 100px;
margin: 10px;
text-align: center;
line-height: 50px;
font-size: 30px;
color: white;
}
</style>
</head>
<body>
<h1>align-items: center</h1>
<div class="flex-container">
<div style="background-color:coral;">1</div>
<div style="background-color:lightblue;">2</div>
<div style="background-color:lightgreen;">3</div>
</div>
</body>
</html>
Flex-start
Значение flex-start выстраивает flex-элементы по верхнему краю контейнера.
Prompt
Создайте flex-контейнер высотой 200px с тремя пронумерованными flex-элементами. Используйте align-items: flex-start, чтобы выровнять элементы по верхнему краю контейнера. Задайте контейнеру светлый фон, а каждому элементу — свой отдельный цвет фона.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>align-items: flex-start</title>
<style>
.flex-container {
display: flex;
height: 200px;
align-items: flex-start;
background-color: #f1f1f1;
}
.flex-container > div {
width: 100px;
margin: 10px;
text-align: center;
line-height: 50px;
font-size: 30px;
color: white;
}
</style>
</head>
<body>
<h1>align-items: flex-start</h1>
<div class="flex-container">
<div style="background-color:coral;">1</div>
<div style="background-color:lightblue;">2</div>
<div style="background-color:lightgreen;">3</div>
</div>
</body>
</html>
Flex-end
Значение flex-end выстраивает flex-элементы по нижнему краю контейнера.
Prompt
Создайте flex-контейнер высотой 200px с тремя пронумерованными flex-элементами. Используйте align-items: flex-end, чтобы выровнять элементы по нижнему краю контейнера. Задайте контейнеру светлый фон, а каждому элементу — свой отдельный цвет фона.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>align-items: flex-end</title>
<style>
.flex-container {
display: flex;
height: 200px;
align-items: flex-end;
background-color: #f1f1f1;
}
.flex-container > div {
width: 100px;
margin: 10px;
text-align: center;
line-height: 50px;
font-size: 30px;
color: white;
}
</style>
</head>
<body>
<h1>align-items: flex-end</h1>
<div class="flex-container">
<div style="background-color:coral;">1</div>
<div style="background-color:lightblue;">2</div>
<div style="background-color:lightgreen;">3</div>
</div>
</body>
</html>
Stretch
Значение stretch заставляет flex-элементы увеличиваться, пока они не заполнят контейнер. Оно ведёт себя так же, как значение по умолчанию, normal.
Prompt
Создайте flex-контейнер высотой 200px с тремя пронумерованными flex-элементами. Используйте align-items: stretch, чтобы элементы заполняли всю высоту контейнера. Задайте контейнеру светлый фон, а каждому элементу — свой отдельный цвет фона. Не задавайте элементам высоту.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>align-items: stretch</title>
<style>
.flex-container {
display: flex;
height: 200px;
align-items: stretch;
background-color: #f1f1f1;
}
.flex-container > div {
width: 100px;
margin: 10px;
text-align: center;
line-height: 50px;
font-size: 30px;
color: white;
}
</style>
</head>
<body>
<h1>align-items: stretch</h1>
<div class="flex-container">
<div style="background-color:coral;">1</div>
<div style="background-color:lightblue;">2</div>
<div style="background-color:lightgreen;">3</div>
</div>
</body>
</html>
Свойство CSS align-content
Если align-items перемещает элементы, то align-content перемещает сами flex-линии, и его действие заметно, только когда flex-элементы переносятся на несколько линий.
Оно принимает такие значения:
stretch(по умолчанию)centerflex-startflex-endspace-betweenspace-aroundspace-evenly
Center
Здесь center собирает flex-линии ближе к середине контейнера.
Prompt
Создайте flex-контейнер высотой 400px, с flex-wrap: wrap и align-content: center. Добавьте девять пронумерованных flex-элементов шириной около 33%, чтобы они переносились на несколько строк. Задайте контейнеру светлый фон, а каждому элементу — свой отдельный цвет фона.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>align-content: center</title>
<style>
.flex-container {
display: flex;
height: 400px;
flex-wrap: wrap;
align-content: center;
background-color: #f1f1f1;
}
.flex-container > div {
width: 30%;
margin: 5px;
text-align: center;
line-height: 50px;
font-size: 30px;
color: white;
}
</style>
</head>
<body>
<h1>align-content: center</h1>
<div class="flex-container">
<div style="background-color:coral;">1</div>
<div style="background-color:lightblue;">2</div>
<div style="background-color:lightgreen;">3</div>
<div style="background-color:coral;">4</div>
<div style="background-color:lightblue;">5</div>
<div style="background-color:lightgreen;">6</div>
<div style="background-color:coral;">7</div>
<div style="background-color:lightblue;">8</div>
<div style="background-color:lightgreen;">9</div>
</div>
</body>
</html>
Space-between
Здесь space-between оставляет одинаковое расстояние от одной flex-линии до следующей.
Prompt
Создайте flex-контейнер высотой 400px, с flex-wrap: wrap и align-content: space-between. Добавьте девять пронумерованных flex-элементов шириной около 33%, чтобы они переносились на несколько строк. Задайте контейнеру светлый фон, а каждому элементу — свой отдельный цвет фона.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>align-content: space-between</title>
<style>
.flex-container {
display: flex;
height: 400px;
flex-wrap: wrap;
align-content: space-between;
background-color: #f1f1f1;
}
.flex-container > div {
width: 30%;
margin: 5px;
text-align: center;
line-height: 50px;
font-size: 30px;
color: white;
}
</style>
</head>
<body>
<h1>align-content: space-between</h1>
<div class="flex-container">
<div style="background-color:coral;">1</div>
<div style="background-color:lightblue;">2</div>
<div style="background-color:lightgreen;">3</div>
<div style="background-color:coral;">4</div>
<div style="background-color:lightblue;">5</div>
<div style="background-color:lightgreen;">6</div>
<div style="background-color:coral;">7</div>
<div style="background-color:lightblue;">8</div>
<div style="background-color:lightgreen;">9</div>
</div>
</body>
</html>
Точное центрирование с помощью Flexbox
Чтобы отцентрировать элемент в обоих направлениях, нужны два объявления у flex-контейнера: justify-content: center и align-items: center. Тогда flex-элемент окажется точно посередине и по горизонтали, и по вертикали.
Пример
Prompt
Создайте flex-контейнер высотой 400px, который использует одновременно justify-content: center и align-items: center, чтобы идеально отцентрировать один flex-элемент. Элемент должен отображать текст «Точное центрирование». Задайте контейнеру светлый фон, а элементу — отдельный цвет фона.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>True Centering With Flexbox</title>
<style>
.flex-container {
display: flex;
height: 400px;
justify-content: center;
align-items: center;
background-color: #f1f1f1;
}
.flex-container > div {
padding: 20px;
font-size: 30px;
color: white;
background-color: #4CAF50;
}
</style>
</head>
<body>
<h1>True Centering</h1>
<div class="flex-container">
<div>True Centering</div>
</div>
</body>
</html>