0

Имею дерево:

.allContainers {
  display: flex;
  justify-content: center;
}

.opNames {
  display: inline-block;
}
<div className="allContainers">
            <div className="opNames">
                <div>
                    <span>...</span>
                </div>
                <div>
                    <span>...</span>
                </div>
                <div>
                    <span>...</span>
                </div>
            </div>
            <div>
                <div>
                    <span>...</span>
                </div>
            </div>
            <div>
                <div>
                    <span>...</span>
                </div>
            </div>
        </div>

Мне нужно растянуть все содержимое allContainers по горизонтали, чтобы блоки всегда были центрированы и уходили вниз, если ширина экрана сужается. На данный момент контейнеры расположены так, что блок opNames растягивается вертикально, а остальные встают от него справа, контейнеры центрированы, но не прыгают вниз при сужении:

введите сюда описание изображения

1 ответ 1

2

Обычное поведение flexbox, как я понимаю, если все параметры указать. Попробуйте запустить пример и изменить размеры контейнера, взявшись за правый нижний уголок:

.allContainers {
  resize: both;
  overflow: hidden;
  box-shadow: 0 0 3px red;
}

.opNames {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

.opNames > div {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  margin: .25em; padding: .9em 1em;
  box-shadow: inset 0 0 3px blue;
}
<div class="allContainers">
  <div class="opNames">
    <div><span>.1.</span></div>
    <div><span>.2.</span></div>
    <div><span>.3.</span></div>
    <div><span>.4.</span></div>
    <div><span>.5.</span></div>
  </div>
</div>

1
  • 1
    Благодарю, работает как надо.
    – MrYogurt
    22 окт 2020 в 17:08

Ваш ответ

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

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