Как выровнять flex элементы по горизонтали?

Question

[Артур Левенсон]

Как выровнять flex элементы по горизонтали? Чтобы получилось вот так:

Я пробую использовать свойство flex-direction: row, но оно почему-то не помогает добиться желаемого результата.

https://codepen.io/kiskiskit/pen/QWEWRrx

Comments

[Антон]

img {
  width: 100px;
}

.services__about {
  display: table; 
  margin:0 auto;
}

.services-items  {
  display: flex; 

  justify-content: space-between;
}

.test {
  width: 400px;
  
}

[Ilya Olovyannikov]

https://codepen.io/Olovyannikov/pen/LYZYwbB

Answer 1

[Арсений Матыцин]

Используй в flex-строке свойство align-items: center или для дочернего элемента align-self: center. Работает как для строк, так и для колонок.

На вложенные элементы не сработает (пикчи в данном случае), для этого потребуется чуть больше ухищрений.

Comments

[Артур Левенсон]

Подскажите пожалуйста как мне поставить пикчи в центре

[Арсений Матыцин]

Артур Левенсон, ты можешь использовать grid со свойством dense. Или выровнять их внутри с помощью фактического контейнера, или контейнера с нужным соотношением (процентный отстсуп) и т.д.

[Артур Левенсон]

Арсений Матыцин, спасибо, помогли ваши советы