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