CSS
【CSS】フレキシボックスで構築された、CSSグリッドレイアウト。Core Flex Grid
June 5, 2016

Core Flex Gridはレスポンシブでフレキシボックスで構築された、CSSグリッドレイアウトライブラリ。軽量でIE10 +サポートされているそうです。
列に自動的に埋めます。グリッドは12列のグリッドです。
<div class="flex-row"> <div class="col"> <div class="demo">6 columns</div> </div> <div class="col"> <div class="demo">6 columns</div> </div> </div>
レスポンシブ列クラスが用意されています。
Always column width | .col-1 |
---|---|
Small devices (480px)Phones/Tablets | .col-1@sm |
Medium devices (720px)Tablets/Laptops | .col-1@md |
Large devices (960px)Laptop/Desktop | .col-1@lg |
Extra Large devices (1440px)Hi-res Laptop/Desktop | .col-1@xl |
<div class="flex-row"> <div class="col-4@md"> <div class="demo">4 columns</div> </div> <div class="col-4@md"> <div class="demo">4 columns</div> </div> <div class="col-4@md"> <div class="demo">4 columns</div> </div> </div>
列クラスは、複数の列のブレークポイントと組み合わせる。
<div class="flex-row"> <div class="col-6@sm col-3@md"> <div class="demo">1</div> </div> <div class="col-6@sm col-3@md"> <div class="demo">2</div> </div> <div class="col-6@sm col-3@md"> <div class="demo">3</div> </div> <div class="col-6@sm col-3@md"> <div class="demo">4</div> </div> </div>
全12列オプション例。
その他の使い方はプラグインページで確認してみてください。
MIT
Download