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

Ваш ответ

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

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