[CSS] Flexbox を使った２カラム3カラム分けのメモ : ういすぷの記録帳

CSS3に実装されています「Flexbox」についてのメモです。
いままでIE11未満の対応などでfloatによるカラム分けをしていましたが、Windows XP/Vista などのサポートが切れたことにより、Flexboxを使っていけるようになりました。
ちょっとしたことなのですが、メモとして残したいと思います。

Flexboxの使い方

使い方は簡単で、親要素に「display:flex;」と指定するだけで、子要素がFlexboxの対象要素となります。

2カラム

シンプルな2カラムです。
■ HTML

<div class="flexbox-demo flexbox-area1"><div class="container1">1</div><div class="container2">2</div></div>

■ CSS

.flexbox-demo {display:flex;}

■ DEMO

3カラム

シンプルな3カラムです。
■ HTML

<div class="flexbox-demo flexbox-area2"><div class="container1">1</div><div class="container2">2</div><div class="container3">3</div></div>

■ CSS

.flexbox-demo {display:flex;}

■ DEMO

割合指定の3カラム

ウインドウ幅に対する割合を指定したカラム割りです。
1=割合1 / 2=割合2 / 3=割合1
■ HTML

<div class="flexbox-demo flexbox-area3"><div class="container1">1</div><div class="container2">2</div><div class="container3">3</div></div>

■ CSS

.flexbox-demo {display:flex;}

.flexbox-area3 .container1 {flex:1;}

.flexbox-area3 .container2 {flex:2;}

.flexbox-area3 .container3 {flex:1;}

■ DEMO

表示順番を変更

1→2番目 / 2→3番目 /3→1番目にずらしています。
■ HTML

<div class="flexbox-demo flexbox-area4"><div class="container1">1</div><div class="container2">2</div><div class="container3">3</div></div>

■ CSS

.flexbox-demo {display:flex;}

.flexbox-area4 .container1 {flex:1;order:2;}

.flexbox-area4 .container2 {flex:2;order:3;}

.flexbox-area4 .container3 {flex:1;order:1;}

■ DEMO

枠内に収まらない場合は、改行してウインドウ幅で最大表示されます。

■ HTML

<div class="flexbox-demo flexbox-area5"><div class="container1">1</div><div class="container2">2</div><div class="container3">3</div><div class="container4">4</div><div class="container5">5</div><div class="container6">6</div><div class="container7">7</div><div class="container8">8</div><div class="container9">9</div></div>

■ CSS

.flexbox-demo {display:flex;}

.flexbox-area5 {flex-wrap:wrap;}

.flexbox-area5 [class^="container"] {flex:1;}

■ DEMO

※ [class^="container"] 部分は、正規表現を利用してまとめて設定しています。こちらの意味は、CLASS名「container」から始まる（class="container〜"）となるCLASSに対してまとめて宣言しています。ちなみに[class^="container"]:hover{}みたいな事もできます。


他にもオプションががありソートなど設定できます。
次のページが参考になります。
CSS Flexbox の各プロパティの使い方を詳しく解説（コリス）


レスポンシブもしやすく簡単な方法ですのでオススメです。
そう言いつつブログの方がfloatのままなので、こちらも追々直していく予定です。


□ 関連記事
・Firefoxの設定（プロファイル）保存場所メモ
・TLS1.0/1.1無効化に伴うサイト表示について
・ぱんぱかぱ〜〜〜ん　集中線（放射線）撮影用背景
・くるくる回す CSSメーカー
・iTunes のインストールが失敗し「アセンブリ'Microsoft.VC80.CRT,Type="win32",version="8.0.50727.6195",publicKey Token="1fc8b3b9a1e3b",prpcessorArchitecture="amd64"'…」が出たときの対応
・ういすぷのブログが、Firefox リーダービューで読めるみたい！
・ブラウザで作るQRコード 「QRコード メーカー」を作りました。
・ffmpeg コマンドのバッチファイルを簡単に作れるようにしました。
・[Add-on Stylish] GOODSMILE ONLINE SHOP 注文履歴 を印刷したい CSS
・「傍点（ぼうてん）」をCSSを使って文字を装飾する
・「RTFree」用バッチ作成機 をアップデートしました。
・全角英数字を半角英数字に変換する「全角→半角」サービス
・半角英数字を全角英数字に変換する「半角→全角」サービス
・CSSで文字や画像を点滅させる。点滅メーカー
・ランダムな英数字の文字列を生成する「パスワードメーカー」