Некоторые способы управления пространством между элементами во флексбоксе:

• justify-content. 24 Свойство распределяет элементы по главной оси. 2 Некоторые значения: flex-start (элементы стоят в начале оси), flex-end (в конце), center (по центру), space-between (элементы равномерно распределены вдоль главной оси, при этом первый элемент располагается в начале, а последний — в конце), space-around (расстояние между крайними элементами и флекс-контейнером равно половине отступа между соседними флекс-элементами), space-evenly (отступы между соседними элементами и краями флекс-контейнера равны). 2
• align-items. 2 Свойство отвечает за выравнивание элементов по поперечной оси. 2 По умолчанию у него значение stretch, то есть элементы растягиваются вдоль всей оси. 2 Другие значения: flex-start (элементы идут в начале оси), flex-end (в конце оси), center (в центре оси), baseline (элементы размещены по базовой линии). 2
• align-self. 2 Свойство выравнивает отдельный элемент по поперечной оси. 2 Значения align-self такие же, как у align-items. 2
• align-content. 2 С помощью этого свойства можно выравнивать не только элементы, но и ряды флекс-элементов вдоль поперечной оси. 2 По умолчанию у align-content значение stretch — то есть ряды флекс-элементов растягиваются, и свободное пространство делится между ними пополам. 2
• gap. 13 С помощью этого свойства можно задавать отступы между строками и столбцами. 3 Является краткой записью свойств row-gap и column-gap. 3 Может иметь одно или два значения. 3 Если указано только одно, то column-gap автоматически равен row-gap. 3 Если указаны два значения, то первое будет задавать отступы между рядами (row-gap), а второе — между колонками (column-gap). 3