justify-content CSS
Свойство justify-content
определяет, как браузер распределяет пространство вокруг флекс-элементов вдоль главной оси контейнера.
Это делается после того, как применяются размеры и автоматические отступы, за исключением ситуации, когда по крайней мере у одного элемента flex-grow
больше нуля. При этом не остаётся никакого свободного пространства для манипулирования.
- Значение по умолчанию:
flex-start
- Наследуется:
- Нет
- Применяется:
К флекс-контейнерам
- Анимируется:
- Нет
- Спецификации:
- Поддержка браузерами:
Синтаксис
/* Positional alignment */
justify-content: center; /* Pack items around the center */
justify-content: start; /* Pack items from the start */
justify-content: end; /* Pack items from the end */
justify-content: flex-start; /* Pack flex items from the start */
justify-content: flex-end; /* Pack flex items from the end */
justify-content: left; /* Pack items from the left */
justify-content: right; /* Pack items from the right */
/* Baseline alignment */
justify-content: baseline;
justify-content: first baseline;
justify-content: last baseline;
/* Distributed alignment */
justify-content: space-between; /* Distribute items evenly
The first item is flush with the start,
the last is flush with the end */
justify-content: space-around; /* Distribute items evenly
Items have a half-size space
on either end */
justify-content: space-evenly; /* Distribute items evenly
Items have equal space around them */
justify-content: stretch; /* Distribute items evenly
Stretch 'auto'-sized items to fit
the container */
/* Overflow alignment */
justify-content: safe center;
justify-content: unsafe center;
/* Global values */
justify-content: inherit;
justify-content: initial;
justify-content: unset;
Значения
-
flex-start
— Флексы прижаты к началу строки. -
flex-end
— Флексы прижаты к концу строки. -
center
— Флексы прижимаются по центру строки. -
space-between
— Флексы равномерно распределяются по всей строке. Первый и последний флекс прижимаются к соответствующим краям контейнера. -
space-around
— Флексы равномерно распределяются по всей строке. Пустое пространство перед первым и после последнего элементов равно половине пространства между двумя соседними элементами.
Примечание
- Safari до версии 9 поддерживает свойство
-webkit-justify-content
.
Примеры
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>justify-content</title>
<style>
section {
display: flex;
margin-bottom: 10px;
}
section > div {
border: 1px solid #ccc;
width: 100px;
height: 100px;
background: repeating-radial-gradient(circle at 50% 50%, #fff, #fff 25px, #f96 25px, #f96 50px);
}
.flex-start {
justify-content: flex-start;
}
.flex-end {
justify-content: flex-end;
}
.center {
justify-content: center;
}
.space-between {
justify-content: space-between;
}
.space-around {
justify-content: space-around;
}
</style>
</head>
<body>
<section class="flex-start">
<div></div><div></div><div></div>
</section>
<section class="flex-end">
<div></div><div></div><div></div>
</section>
<section class="center">
<div></div><div></div><div></div>
</section>
<section class="space-between">
<div></div><div></div><div></div>
</section>
<section class="space-around">
<div></div><div></div><div></div>
</section>
</body>
</html>