如何使用Flexbox Grid堆叠div？

我正在使用http://flexboxgrid.com框架。如何使用Flexbox Grid堆叠div？

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

例（桌面）：

例（移动）：

<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的小屏幕或手机上的行内每列？

这是不可能的框架？

来源

2017-02-26 Rohit Tigga

貌似框架不具有一个内置的方式做到这一点，很容易，如果你不介意有点自定义CSS的，虽然做。 – Gerrit0

为了使用Flexbox，您需要将您的容器制作成柔性容器，并将最小宽度设置为盒子div。

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

.box { 
    min-width: 40px; 
}

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

来源

2017-02-26 21:14:27

如何使用Flexbox Grid堆叠div？

回答

相关问题