мое новое расписание: пн-пт с 8.00 по 16.00 по москве, сб и вс - выходные; после 16.00 и на вых. отвечаю по возможности

Выравнивание flex элементов

Для выравнивания флекс элементов используется специальное свойство 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; }

Результат выполнения кода:

Повторите страницу по данному образцу: