Как расположить 3 flex-элемента в одну строку и выровнять их первый-по левому краю, второй по центру, третий по правому краю родителя?

Question

[NotLogo]

Подскажите, пожалуйста:

Есть шапка сайта, которая содержит:

1. Левый блок: Логотип и номера телефонов
   
2. Центральный блок: меню
   
3. Правый блок: иконки: поиск, аккаунтов, и т.д. и т.п.
   

• Каждый из этих блоков произвольной, нефиксированной длины из-за динамического содержимого.
  
• Каждый из блоков должен быть flex или inline-flex элементов для позиционирования дочерних элементов
  
• Все три блока должны быть выравнены по вертикали относительно друг-друга.
  
• Родитель имеет фиксированный max-widh и width: 100%
  

Comments

[Ankhena]

А почему вы решили, что это нужно делать флексами?
Разумнее гридами, единицами fr и justify-self

[Виталий Першин]

justify-content: space-between; Левый и правый блок поместить в контейнеры с одинаковым flex-basis. Центральный сам станет по центру, если надо будет растянуть ставим ему flex-grow: 1

Answer 1

[Rucklless]

<section class="space-between">
   <div></div>
   <div></div>
   <div></div>
</section>

.space-between {
    display: flex;
    justify-content: space-between;
}

https://codepen.io/rucklless/pen/yLoNyRW

тут можешь подробнее почитать
https://webref.ru/css/justify-content

Comments

[Ankhena]

не выйдет ;)

[Rucklless]

Ankhena, https://codepen.io/rucklless/pen/yLoNyRW

[Ankhena]

Rucklless, а теперь сделайте их разной (неизвестной) ширины, как просит автор.

[Ankhena]

Rucklless, да в том и дело, что не будет средний блок по центру, если крайние не равной ширины.
Он будет по центру свободного пространства, но не по центру блока.