Лекция от HTMLAcademy про justify-content

В Flexbox есть свойства justify-content, которые позволяют равномерно распределять элементы вдоль главной оси:

• 'space-between' — это значение, при котором расстояния между соседними элементами равны, а отступы между элементами и краями контейнера отсутствуют.
• 'space-around' — это значение, при котором расстояния между соседними элементами равны, а отступы между элементами и краями контейнера составляют половину расстояния между соседними элементами.
• 'space-evenly' — это значение, при котором расстояния между всеми элементами, включая края контейнера, равны.

Свойство 'justify-content' контролирует распределение элементов вдоль главной оси и принимает пять различных значений:

• Значение по умолчанию "flex-start" Располгает элементы в начале оси.

justify-content: flex-start;  

• "flex-end" распологает элементы в конце главной оси.

  Нужно обратить внимание, что "justify-content: flex-end" не изменяет порядок элементов, в отличие от "flex-direction: row-reverse".

justify-content: flex-end;  

• "space-between" расстояния между соседними элементами равны, отступы от краёв контейнера отсутствуют.

justify-content: space-between;  

• "space-around" расстояния между соседними элементами равны, отступы от краёв контейнера равны половине расстояния между элементами.

justify-content: space-around;  

• "space-evenly" Расстояния между соседними элементами и краями контейнера равны.

justify-content: space-evenly;