How to Use Justify Content Space Between for Better Web Layout

CSS свойство `justify-content` определяет способ выравнивания элементов внутри контейнера вдоль оси главной (main) в соответствии с их направлением. В значении `space-between` элементы размещаются с равным расстоянием между ними, и при этом первый элемент прижимается к началу контейнера, а последний – к ее концу.

Рассмотрим пример кода:

HTML:

  
1
  
2
  
3

CSS:

.container {
  display: flex;
  justify-content: space-between;
}
.item {
  background-color: lightblue;
  padding: 10px;
}

В данном примере у контейнера `container` задано свойство `justify-content: space-between`, что означает, что элементы `item` будут расположены с равным расстоянием между ними. Каждому элементу `item` задан задний фон и отступы внутри блока.

Данный код создаст контейнер с тремя элементами, которые будут выравниваться с равным расстоянием между ними. Первый элемент будет расположен в начале контейнера, а последний – в конце.

Таким образом, свойство `justify-content: space-between` позволяет располагать элементы с равным расстоянием между ними, при этом первый и последний элементы будут выровнены соответственно к началу и концу контейнера.