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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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