Столкнулся с такой проблемой. Делаю себе меню навигации горизонтальное. Оно делится изначально на 3 зоны.
Основной блок с оформлением меню. А дальше вложенные:
1 блок - логотип
2 блок - текстовые кнопки
3 блок - иконки управления
Все 3 блока должны делить общий размер меню в зависимости от заполненности каждого из них.
По идее, содержимое должно быть распределено так:
Логотип в первом блоке и выравнивается по левому краю.
Текстовые кнопки во втором блоке, должны быть в центре меню.
И дальше идет третий блок и в нем контент должен выравниваться по его правому краю.
Для реализации выбрал flexbox.
И вроде бы все нормально работает. За исключением того, что если в третьем блоке я размещаю блочный, то выравнивание по правому краю работает, а если я пытаюсь туда поместить блок inline-block, то выравнивание перестает работать. А мне нужно там в ряд иконки размещать. Т.е блоки должны быть в один ряд расположены. Что я не так делаю?
Вот в третьей колонке отображается блок как надо сейчас, но если его сделать display-inline, то выравнивание будет по левой стороне.
Здравствуйте уважаемые программисты.
Столкнулся с такой проблемой. Делаю себе меню навигации горизонтальное. Оно делится изначально на 3 зоны.
Основной блок с оформлением меню. А дальше вложенные:
1 блок - логотип
2 блок - текстовые кнопки
3 блок - иконки управления
Все 3 блока должны делить общий размер меню в зависимости от заполненности каждого из них.
По идее, содержимое должно быть распределено так:
Логотип в первом блоке и выравнивается по левому краю.
Текстовые кнопки во втором блоке, должны быть в центре меню.
И дальше идет третий блок и в нем контент должен выравниваться по его правому краю.
Для реализации выбрал flexbox.
Слишком много букв, во первых дизайн скиньте, где показано как должно быть, и код в codepen, где показано как не получается.
Александр, собственно, у всех трех внутренних блоков добавляешь display: flex.
У первого внутреннего - justify-content: flex-start, у среднего - justify-content: center, у третьего - justify-content: flex-end.
Если нужно, чтобы внутри каждого блока так же выравнивались по середине блока - у всех align-items: center.
Простой
