Помогите выровнять контейнеры

Question

Имею дерево:

.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 растягивается вертикально, а остальные встают от него справа, контейнеры центрированы, но не прыгают вниз при сужении:

Answer 1

Обычное поведение 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>

БЛОГ НА HUSL

Помогите выровнять контейнеры

Ответы (1 шт):