CSS

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

June 5, 2016

Core Flex Gridはレスポンシブでフレキシボックスで構築された、CSSグリッドレイアウトライブラリ。軽量でIE10 +サポートされているそうです。

Auto fit colums

列に自動的に埋めます。グリッドは12列のグリッドです。
core_flex_grid_1

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

Responsive Columns

レスポンシブ列クラスが用意されています。

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

core_flex_grid_2

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

Dynamic Columns

列クラスは、複数の列のブレークポイントと組み合わせる。
core_flex_grid_3

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