Как сделать такое выравнивание во flex?

В CSS есть несколько способов выравнивания элементов в контейнере, используя свойство display: flex. Один из наиболее популярных способов - это использование свойства justify-content для выравнивания элементов по горизонтали и свойства align-items для выравнивания элементов по вертикали.

Для использования выравнивания по горизонтали можно использовать следующие значения свойства justify-content:

- flex-start: элементы выравниваются по левому краю контейнера.
- flex-end: элементы выравниваются по правому краю контейнера.
- center: элементы выравниваются по центру контейнера.
- space-between: элементы распределяются равномерно по горизонтали с одинаковыми промежутками между ними.
- space-around: элементы распределяются равномерно по горизонтали с равным промежутком как до, так и после каждого элемента.

Например, чтобы выравнять элементы по горизонтали по центру, вы можете использовать следующий CSS код:

.container {
  display: flex;
  justify-content: center;
}

Для выравнивания элементов по вертикали можно использовать следующие значения свойства align-items:

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

Например, чтобы выравнять элементы по вертикали по центру, вы можете использовать следующий CSS-код:

.container {
  display: flex;
  align-items: center;
}

Кроме того, вы также можете использовать комбинацию этих свойств, чтобы достичь требуемого выравнивания.
Надеюсь, эта информация поможет вам сделать нужное выравнивание во flex.