html - How to stack divs using Flexbox Grid?

Question

I'm using the http://flexboxgrid.com framework.

I want the columns to be horizontal on desktop but stack on mobile and responsively.

Example (Desktop):

Example (Mobile):

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

Here's a JSFiddle that demonstrates what I am saying.

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

How exactly does one stack divs for each column inside the row on a smaller screen or mobile?

Is that not possible with the framework?

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/