如何使用Flexbox Grid堆叠div？

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，您需要将容器放入Flex容器中，并将最小宽度设置为方框div。

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

.box {
  min-width: 40px;
}

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