如何使用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？

回答

相關問題