如何使用 Flexbox Grid 堆叠 div？答案

【问题标题】：How to stack divs using Flexbox Grid?如何使用 Flexbox Grid 堆叠 div？
【发布时间】：2017-02-26 20:42:42
【问题描述】：

我希望列在桌面上是水平的，但在移动设备上和响应式堆叠。

示例（桌面）：

示例（移动）：

<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/

在较小的屏幕或移动设备上，行内每一列的堆栈 div 究竟如何？

框架不能做到这一点吗？

【问题讨论】：

看起来框架没有内置的方法来做到这一点，不过如果你不介意一点自定义 CSS，这很容易做到。

标签： html css flexbox flexboxgrid

【解决方案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>

每个包含box 类的div 都被定义为获取移动版本中的12 列。但是对于lg 分辨率，它们同样获得 3 列。要定义您要使用的分辨率，您可以随时前往Bootstrap 进行确认。

【讨论】：

【解决方案2】：

为了使用 Flexbox，你需要将你的容器变成一个 flex 容器，并为盒子 div 设置一个 min-width。

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

.box {
  min-width: 40px;
}

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

【讨论】：