Элементы флекс-контейнера выравниваются вдоль двух осей: главной и поперечной. 2

Выравнивание по главной оси осуществляется с помощью свойства justify-content. 24 Некоторые способы:

• flex-start — элементы стоят в начале оси (по умолчанию); 24
• flex-end — элементы стоят в конце оси; 24
• center — элементы по центру оси; 24
• space-between — элементы равномерно распределены вдоль главной оси, при этом первый элемент располагается в начале, а последний — в конце; 24
• space-around — элементы равномерно распределены вдоль оси. 24 Расстояние между крайними элементами и флекс-контейнером равно половине отступа между соседними флекс-элементами; 2
• space-evenly — элементы равномерно размещены вдоль оси. 2 Отступы между соседними элементами и краями флекс-контейнера равны. 2

Выравнивание по поперечной оси происходит с помощью свойства align-items. 24 Некоторые способы:

• stretch — элементы растягиваются вдоль всей оси (по умолчанию); 24
• flex-start — элементы идут в начале оси; 24
• flex-end — элементы идут в конце оси; 24
• center — элементы в центре оси; 24
• baseline — элементы размещены по базовой линии (невидимая линия, которая проходит по нижней части букв). 24

Также для выравнивания отдельных элементов внутри флекс-контейнера используется свойство align-self. 15

Кроме того, есть свойство align-content, которое позволяет выравнивать не только элементы, но и ряды флекс-элементов вдоль поперечной оси. 2