CSS justify-content: как использовать и применять к элементам
CSS свойство justify-content используется для выравнивания содержимого внутри контейнера по главной оси. Это свойство управляет распределением свободного пространства между элементами или их контейнером, когда все элементы в контейнере занимают не всю доступную ширину их контейнера по горизонтали. Свойство justify-content имеет несколько значений:
1. flex-start (по умолчанию) - Элементы распределяются вдоль главной оси, начиная с начала контейнера.
2. flex-end - Элементы распределяются вдоль главной оси, заканчивая в конце контейнера.
3. center - Элементы распределяются вдоль главной оси, выравниваясь по центру контейнера.
4. space-between - Элементы распределяются вдоль главной оси, таким образом, чтобы расстояние между элементами было одинаковым, а расстояние от края контейнера до первого и последнего элементов было равным половине расстояния между элементами.
5. space-around - Элементы распределяются вдоль главной оси, таким образом, чтобы расстояние между элементами и расстояние от края контейнера до первого и последнего элементов были одинаковыми.
Например, вот как мы можем использовать свойство justify-content, чтобы выровнять элементы по центру контейнера:
html
Item 1
Item 2
Item 3
css
.container {
display: flex;
justify-content: center;
}
.item {
margin: 10px;
padding: 20px;
background-color: #ccc;
}
В этом примере мы используем display:flex; для установления гибкого контейнера, а свойство justify-content:center; выравнивает элементы в контейнере по центру.
Также, мы можем использовать другие значения свойства, чтобы распределить элементы по-разному, как показано в следующих примерах:
css
.container {
display: flex;
justify-content: flex-start;
}
.container {
display: flex;
justify-content: flex-end;
}
.container {
display: flex;
justify-content: space-between;
}
.container {
display: flex;
justify-content: space-around;
}
Таким образом, свойство justify-content является важным инструментом для работы с гибким контейнером, который позволяет легко выравнивать содержимое внутри контейнера по главной оси.