0

Извиняюсь. Переделал немного.

Вот пример https://codepen.io/gluhovalexey/pen/OBjzGY

Здесь есть шапка и элемент из 3 частей, который включает списки ul слева и справа и div с контентом посередине, находящиеся в flex-contaner

Суть вопроса если убрать элемент со списками ul, то ширина шапки уменьшится. Тоесть если со страницы сайта в которой есть ul как на примере перейти на другую, где списков нет, то шапка сайта и другие постоянные элементы будут "прыгать" из за изменения размеров.

<div class="flex-container">
    <div  class="flex-row header">
        <img src="https://d.radikal.ru/d17/1810/b9/7bd548daa75f.png">
        <img src="https://d.radikal.ru/d17/1810/b9/7bd548daa75f.png">
        <img src="https://d.radikal.ru/d17/1810/b9/7bd548daa75f.png">
    </div>
    <div class="flex-row content">
        <div class="left">
            <ul>
                <li class=""><a href="" target="_blank">Пункт a</a></li>
                <li class=""><a href="" target="_blank">Пункт b</a></li>
                <li class=""><a href="" target="_blank">Пункт c</a></li>
                <li class=""><a href="" target="_blank">Пункт d</a></li>
                <li class=""><a href="" target="_blank">Пункт e</a></li>
                <li class=""><a href="" target="_blank">Пункт f</a></li>
                <li class=""><a href="" target="_blank">Пункт j</a></li>
                <li class=""><a href="" target="_blank">Пункт h</a></li>
            </ul>
        </div>
        <div class="center">
            Какой то контент посередине

        </div>
        <div class="right">
            <ul>
                <li class=""><a href="" target="_blank">Пункт 1</a></li>
                <li class=""><a href="" target="_blank">Пункт 2</a></li>
                <li class=""><a href="" target="_blank">Пункт 3</a></li>
                <li class=""><a href="" target="_blank">Пункт 4</a></li>
                <li class=""><a href="" target="_blank">Пункт 5</a></li>
                <li class=""><a href="" target="_blank">Пункт 6</a></li>
                <li class=""><a href="" target="_blank">Пункт 7</a></li>
                <li class=""><a href="" target="_blank">Пункт 8</a></li>
            </ul>
        </div>
    </div>
</div>

Стили:

.header {
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.header img {
    width: 32%;
    margin: 1px;
    height: 100%;
}
.flex-container {
  display: flex;
  margin: 10px auto;
  max-width: 1300px;
  flex-wrap: wrap;
  flex-direction: column;
}

.flex-row {
  display: flex;
  margin-bottom: 50px
}

.content {
    flex-direction: row;
    width: 100%;
}

.content .left {
    flex: 2;
    width: 20%;

}

.content .center {
    flex: 4;
    justify-content: center;
    width: 60%;
}

.content .right {
    flex: 2;
    width: 20%;
}
3
  • Изменил пример чтобы было понятно, что где и чтобы не приглядываться. Полчаса читаю вопрос и код и так и не понял в чем проблема.
    – Air
    12 окт 2018 в 17:42
  • Исправьте вопрос, ничего не понятно.
    – E_K
    12 окт 2018 в 17:48
  • Без стилей ничем не поможем, по сути родителю накинте justify-content: space-between 12 окт 2018 в 19:17

2 ответа 2

1

Я думаю понял что вы хотели: https://codepen.io/Rusic/pen/EdvQee

Суть в том, что нужно ограничить рост и уменьшение флексов: краток это flex: 0 0 60% но ранее с этим были проблемы в записе по порядку:

flex-grow: 0
flex-shrink: 0
flex-basis: 60%
2
  • Rusla Semenov, не помогло. ширина .flex-container меняется и тянет соответственно за собой элементы внутри 13 окт 2018 в 5:22
  • Ну так правильно, родитель то резиновый, задавайте тогда размеры не в % а пикселях, или жёстко задайте размер родителя 13 окт 2018 в 8:57
0

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

1
  • А ларчик просто открывался... Всё из за того, что справа появлялась полоса прокрутки из за увеличения страницы по горизонтали. 1 апр 2019 в 6:17

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.