@annyeong1

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

Делаю навигационное меню, возникла такая проблема: display flex на родительский элемент не распределяет элементы во весь блок. Вот код:

HTML
5ff61178e1268777002436.png

LESS

.shop_slider {
    
    .top_title_line {
        min-height: 81px;
        background: linear-gradient(#ff6c22, #ff4616);
        display: flex;
        align-items: center;
        color: #fff;
        .fredoka_font();

        .shop_box_title {
            flex-grow: 1;
            text-align: center;
        }

        .left, .right {
            display: block;
            opacity: 50%;
        }
    }
}


CSS

.shop_slider .top_title_line {
  min-height: 81px;
  background: linear-gradient(#ff6c22, #ff4616);
  display: flex;
  align-items: center;
  color: #fff;
  font-family: 'Fredoka One', cursive;
}
.shop_slider .top_title_line .shop_box_title {
  flex-grow: 1;
  text-align: center;
}
.shop_slider .top_title_line .left,
.shop_slider .top_title_line .right {
  display: block;
  opacity: 50%;
}


JSFiddle - https://jsfiddle.net/2rc5k8z0/2/

Поставить display block дочерним элементам не помогает, как и выставление width 100% на родительский.5ff610e2543e9033992345.png

Хочу так: 5ff6125571156589452761.png
  • Вопрос задан
  • 72 просмотра
Решения вопроса 1
@eandr_67
web-программист (*AMP, Go, JavaScript, вёрстка).
Ну так flex в top_title_line действует только на единственный вложенный тег shop_slider_navigation - никак не влияя на теги внутри shop_slider_navigation.

А чтобы распределить блоки внутри shop_slider_navigation, надо и display: flex; и настройки flex установить для shop_slider_navigation.

P.S. В редакторе вопроса есть кнопка вставки кода - с помощью которой можно нормально вставить и HTML, и CSS. Делать HTML картинкой не имеет смысла и только мешает отвечающим.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@samura95
Оберни left и right блоки в обертку и вуаля
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы