Как выровнять содержимое при использовании flex?

Question

[Александр]

Столкнулся с такой проблемой. Делаю себе меню навигации горизонтальное. Оно делится изначально на 3 зоны.
Основной блок с оформлением меню. А дальше вложенные:
1 блок - логотип
2 блок - текстовые кнопки
3 блок - иконки управления

Все 3 блока должны делить общий размер меню в зависимости от заполненности каждого из них.
По идее, содержимое должно быть распределено так:
Логотип в первом блоке и выравнивается по левому краю.
Текстовые кнопки во втором блоке, должны быть в центре меню.
И дальше идет третий блок и в нем контент должен выравниваться по его правому краю.

Для реализации выбрал flexbox.
И вроде бы все нормально работает. За исключением того, что если в третьем блоке я размещаю блочный, то выравнивание по правому краю работает, а если я пытаюсь туда поместить блок inline-block, то выравнивание перестает работать. А мне нужно там в ряд иконки размещать. Т.е блоки должны быть в один ряд расположены. Что я не так делаю?



Вот в третьей колонке отображается блок как надо сейчас, но если его сделать display-inline, то выравнивание будет по левой стороне.

Comments

[approximate solution]

Здравствуйте уважаемые программисты.
Столкнулся с такой проблемой. Делаю себе меню навигации горизонтальное. Оно делится изначально на 3 зоны.
Основной блок с оформлением меню. А дальше вложенные:
1 блок - логотип
2 блок - текстовые кнопки
3 блок - иконки управления

Все 3 блока должны делить общий размер меню в зависимости от заполненности каждого из них.
По идее, содержимое должно быть распределено так:
Логотип в первом блоке и выравнивается по левому краю.
Текстовые кнопки во втором блоке, должны быть в центре меню.
И дальше идет третий блок и в нем контент должен выравниваться по его правому краю.

Для реализации выбрал flexbox.

Слишком много букв, во первых дизайн скиньте, где показано как должно быть, и код в codepen, где показано как не получается.

[Rustam Bainazarov]

Где макет?

[Александр]

approximate solution, поправил

[Александр]

Рустам Байназаров, поправил

Answer 1

[Александр]

Изучите свойство justify-content.
https://developer.mozilla.org/ru/docs/Web/CSS/just...

И у третьего блока можно тоже добавить display:flex, тогда у внутренних inline-block не нужен будет.

Comments

[Александр]

Изучите свойство justify-content.

Я читал про него и пробовал применить, но у меня так ничего и не вышло...

И у третьего блока можно тоже добавить display:flex

Как вариант, можно попробовать...

[Александр]

Александр, собственно, у всех трех внутренних блоков добавляешь display: flex.
У первого внутреннего - justify-content: flex-start, у среднего - justify-content: center, у третьего - justify-content: flex-end.
Если нужно, чтобы внутри каждого блока так же выравнивались по середине блока - у всех align-items: center.

[Александр]

Александр, спасибо. Таким раскладом вроде бы все вырисовывается как надо!

[Александр]

Александр, если помогло, можете выбрать ответ как решение)

[Александр]

Александр, Еще не все, похоже работает как надо. Позже отпишусь...

[Александр]

Александр, могу на рабочем сайте прямо подсказать

[Александр]

Александр, Спасибо, все помогло, это у меня был косяк в стилях ))