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 является важным инструментом для работы с гибким контейнером, который позволяет легко выравнивать содержимое внутри контейнера по главной оси.