Как исправить display: flex, если он не работает должным образом?
Делаю навигационное меню, возникла такая проблема: display flex на родительский элемент не распределяет элементы во весь блок. Вот код:
HTML 
Поставить display block дочерним элементам не помогает, как и выставление width 100% на родительский.
Хочу так: 
- Вопрос задан более двух лет назад
- 4568 просмотров
- Вконтакте
Ну так flex в top_title_line действует только на единственный вложенный тег shop_slider_navigation — никак не влияя на теги внутри shop_slider_navigation.
А чтобы распределить блоки внутри shop_slider_navigation, надо и display: flex; и настройки flex установить для shop_slider_navigation.
display: flex not working in CSS
ng-switch will be true only once; hence the red div will be only one and the rest will be blue .
Now, they all stack up on top of each other.
But I want them to show like:
I am not sure how to give classes inside such a ng-repeat to make them look like this.
so that only the blue divs inside ng-switch-default wraps around each other and not around the red div.
css display flex не работает должным образом в Chrome и Safari
Я использовал свойства flexbox, чтобы мой раздел выглядел так:
Он отлично работает в Chrome, но я заметил несколько отличий, когда проверил firefox и safari.
Так выглядит хром:
Но в Firefox мне не удается применить маржу в 1%, как я хочу, как показывает красный сигнал:
А на сафари ящики все одна за другой:
Это сайт WordPress и еще не запущен. Но вот моя html-структура:
Как я могу заставить это работать во всех браузерах?
4 ответа
Я настоятельно рекомендую вам не использовать flexbox, а вместо этого использовать float. Удалите все свойства гибкости, ваш css должен выглядеть так:
Затем вы можете добавить остальную укладку. Он будет работать во всех браузерах.
Лучший способ обеспечить одинаковую работу flex во всех браузерах — использовать префиксы.
Вот диаграмма из MDN, показывающая различные префиксы браузера, доступные для гибкого блока (и общие уведомления о поддержке браузера)
Иногда HTML version может быть причиной (в моем случае) :
Я искал <!DOCTYPE html> в верхней части source code . Мой HTML оказался 4.0 something , и это было причиной (скорее всего) того, что flex не работал. Как только это было изменено, все заработало.
Почему может не работать flex-grow/margin-left: atuto при двойном display: flex?
Почему-то если убрать display: flex у элемента header и оставить его только у ul списка все работает и flex-grow и можно отодвинуть margin-left: auto, но если оставить display: flex у header то все перестает работать, вроде же можно вложенные flex элементы внутри flex элемента делать.
Заранее всем спасибо за ответы!
- eTarget 2011:Панельная дискуссия «Стратегия и планирование рекламной кампании в интернете»
- eTarget 2011: Круглый стол «Реклама в онлайн-видео»
- Могут ли «плохие» входящие ссылки привести к ухудшению ранжирования?
- Зачем элементу header делать flex если в нём нет других элементов кроме nav которые надо выравнивать?
- Лучше не растягивать пункт about, будет выглядеть не красиво при наведении будет большая растянутая полоса. Я продублировал ниже для примера.
- У вас не работало потому что вы не задавали ширину элементам nav и ul
Спасибо! Да точно, после установки ширины в 100% для элемента nav, стали работать и flex-grow и margin-left для li элементов и для ul заработали justify-content в виде space-between, space-around и т.п. При этом свойство display: flex остается и для header.
1. Это хороший вопрос и я не знаю что на него ответить, я просто не думал что это проблема, на сайте Mozilla для разработчиков — https://developer.mozilla.org/ru/docs/Learn/CSS/CSS_layout/Flexbox
Я думал, что можно это свойство назначать всему подряд где хочется применять выравнивания и расстановку в стиле flexbox.
2. Так я и хотел, как бы отодвинуть по разные стороны элементы.
3. Да про ширину я не подумал, т.к. сбило то что если убрать display: flex у header, то все работает без указания ширины.