[CSS] Flexbox を使った2カラム3カラム分けのメモ

[CSS] Flexbox を使った2カラム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
1
2




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
1
2
3




割合指定の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
3




表示順番を変更


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
1
2
3



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


■ 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
1
2
3
4
5
6
7
8
9

※ [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で文字や画像を点滅させる。点滅メーカー
ランダムな英数字の文字列を生成する「パスワードメーカー」



2018.07.09

コメント投稿フォーム

 

カテゴリ

オススメ

カプセルトイ関連

ミク関連

最近の投稿

アーカイブ

RSS Feed RSS Feed Atom Feed TopicXML アイコン
WebBoard