Для выравнивания флекс элементов используется
специальное свойство justify-content.
Оно принимает достаточно много значений,
которые мы и изучим в данном уроке.
Значение center
Значение center позволяет выровнять
элементы по центру:
.parent {
display: flex;
justify-content: center;
}
Результат выполнения кода:
Значение space-between
Значение space-between позволяет сделать
так, чтобы элементы равномерно распределились
по своему родителю, а расстояние между ними
рассчиталось автоматически. При этом первый
элемент будет прижат к левому краю, а последний
- к правому.
Давайте посмотрим на примере:
.parent {
display: flex;
justify-content: space-between;
}
Результат выполнения кода:
Значение space-around
Значение space-around работает похожим
образом, только делает так, чтобы первый
и последний элемент отступали от края родителя.
С первого взгляда может показаться, что расстояние
между элементами и между крайними элементами
и родителем будут равны, однако, это не так
- расстояние между элементами будет в 2
раза больше, чем между родителем и крайним
элементом.
Посмотрим на примере:
.parent {
display: flex;
justify-content: space-around;
}
Результат выполнения кода:
Значение space-evenly
Поведение space-around чаще всего
не то, которое вам хотелось бы. Чаще всего
нам нужно сделать так, чтобы все указанные
выше промежутки были равны.
Для этого придумано значение space-evenly,
которое и сделает то, что нам нужно:
.parent {
display: flex;
justify-content: space-evenly;
}
Результат выполнения кода: