Свойство CSS justify-content
Вдоль главной оси (по горизонтали) flex-элементы располагаются с помощью justify-content.
Вы можете задать ему любое из этих значений:
centerflex-start(по умолчанию)flex-endspace-aroundspace-betweenspace-evenly
Center
При center flex-элементы собираются в середине контейнера.
Prompt
Создайте flex-контейнер с тремя пронумерованными элементами (1, 2, 3) и используйте justify-content: 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>Flexbox justify-content: center</title>
<style>
.flex-container {
display: flex;
justify-content: center;
background-color: #f1f1f1;
padding: 10px;
}
.flex-container > div {
background-color: #4CAF50;
color: white;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>justify-content: center</h1>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
Flex-start
flex-start вы получаете, ничего не задавая, поскольку это значение по умолчанию: flex-элементы выстраиваются от начала контейнера.
Prompt
Создайте flex-контейнер с тремя пронумерованными элементами (1, 2, 3) и используйте justify-content: flex-start, чтобы выровнять их в начале контейнера. Оформите контейнер светло-серым фоном, а элементы — отдельным цветом фона и небольшими отступами (padding).
Результат: полная 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>Flexbox justify-content: flex-start</title>
<style>
.flex-container {
display: flex;
justify-content: flex-start;
background-color: #f1f1f1;
padding: 10px;
}
.flex-container > div {
background-color: #4CAF50;
color: white;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>justify-content: flex-start</h1>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
Flex-end
Значение flex-end сдвигает flex-элементы к дальнему концу контейнера.
Prompt
Создайте flex-контейнер с тремя пронумерованными элементами (1, 2, 3) и используйте justify-content: 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>Flexbox justify-content: flex-end</title>
<style>
.flex-container {
display: flex;
justify-content: flex-end;
background-color: #f1f1f1;
padding: 10px;
}
.flex-container > div {
background-color: #4CAF50;
color: white;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>justify-content: flex-end</h1>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
Space-around
При space-around у каждого flex-элемента есть пространство до и после него, а значит, и между ним и соседними элементами.
Prompt
Создайте flex-контейнер с тремя пронумерованными элементами (1, 2, 3) и используйте justify-content: space-around, чтобы отобразить их с равным пространством вокруг каждого элемента. Оформите контейнер светло-серым фоном, а элементы — отдельным цветом фона и небольшими отступами (padding).
Результат: полная 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>Flexbox justify-content: space-around</title>
<style>
.flex-container {
display: flex;
justify-content: space-around;
background-color: #f1f1f1;
padding: 10px;
}
.flex-container > div {
background-color: #4CAF50;
color: white;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>justify-content: space-around</h1>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
Space-between
При space-between первый элемент находится в начале, последний — в конце, а оставшееся пространство распределяется между элементами.
Prompt
Создайте flex-контейнер с тремя пронумерованными элементами (1, 2, 3) и используйте justify-content: space-between, чтобы отобразить их с равным пространством между элементами. Оформите контейнер светло-серым фоном, а элементы — отдельным цветом фона и небольшими отступами (padding).
Результат: полная 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>Flexbox justify-content: space-between</title>
<style>
.flex-container {
display: flex;
justify-content: space-between;
background-color: #f1f1f1;
padding: 10px;
}
.flex-container > div {
background-color: #4CAF50;
color: white;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>justify-content: space-between</h1>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
Space-evenly
При space-evenly все промежутки вокруг flex-элементов и между ними равны.
Prompt
Создайте flex-контейнер с тремя пронумерованными элементами (1, 2, 3) и используйте justify-content: space-evenly, чтобы отобразить их с равным пространством вокруг и между каждым элементом. Оформите контейнер светло-серым фоном, а элементы — отдельным цветом фона и небольшими отступами (padding).
Результат: полная 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>Flexbox justify-content: space-evenly</title>
<style>
.flex-container {
display: flex;
justify-content: space-evenly;
background-color: #f1f1f1;
padding: 10px;
}
.flex-container > div {
background-color: #4CAF50;
color: white;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>justify-content: space-evenly</h1>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>