Как складывать div с помощью Flexbox Grid?

Question

Я использую фреймворк http://flexboxgrid.com/.

Я хочу, чтобы столбцы были горизонтальными на рабочем столе, но размещались на мобильных устройствах и быстро реагировали.

Пример (рабочий стол):

Пример (мобильный):

<div class="row">
    <div class="col-xs">
        <div class="box">1</div>
    </div>
    <div class="col-xs">
        <div class="box">2</div>
    </div>
    <div class="col-xs">
        <div class="box">3</div>
    </div><div class="col-xs">
        <div class="box">4</div>
    </div>
</div>

Вот JSFiddle, который демонстрирует, что я говорю.

https://jsfiddle.net/RohitTigga/mfv622rt/

Как точно один стек делит для каждого столбца в строке на меньшем экране или мобильном?

Разве это не возможно с рамками?

Answer 1

Я знаю, что у меня задержка на 2 года (ха-ха), но цель - определить количество столбцов для нужных вам разрешений. Flexbox определяется с использованием 12 столбцов, поэтому для достижения вашего примера вам нужно сделать что-то вроде этого.

<div class="row">
    <div class="col-xs-12 col-lg-3">
        <div class="box">1</div>
    </div>
    <div class="col-xs-12 col-lg-3">
        <div class="box">2</div>
    </div>
    <div class="col-xs-12 col-lg-3">
        <div class="box">3</div>
    </div>
    <div class="col-xs-12 col-lg-3">
        <div class="box">4</div>
    </div>
</div>

Каждые div который содержит boxкласс определен для получения 12 столбцов в мобильной версии. Но дляlgразрешения они получают равно 3 столбца. Чтобы определить разрешение, которое вы хотите использовать, вы всегда можете перейти в Bootstrap для подтверждения.

Answer 2

Чтобы использовать Flexbox, вам нужно превратить ваш контейнер в гибкий контейнер, а также установить минимальную ширину для блоков div.

.row {
  display: flex;
  flex-direction: row;
}

.box {
  min-width: 40px;
}

https://jsfiddle.net/abstraktion/mfv622rt/3/