Flexboxの全プロパティと使い方

CSS3の新しいレイアウトモジュールFlexible Box Layout Module（以下、Flexboxと呼ぶ）が、WebサイトのHTML/CSSレアイアウトコーディングの主流になりつつあります。

これまでのレイアウト構成に使っていた、floats と clearfix では表現できなかったことが、Flexboxでは簡単に表現できるようになりました。今回の記事ではCSS3の新しいレイアウトモジュール Flexboxの全12つのプロパティをデモ付きでご紹介いたします。

神戸ITフェスティバル2016 登壇時に使用したスライドも合わせてどうぞ。
http://shared-blog.kddi-web.com/sandbox/flexbox-s/

Flexboxの使い方

Flexboxは、まず親要素をFlex containerにします。Flex containerは、displayプロパティにflexを（display:flex;）指定します。

HTML

<div class="flex-container">
 <div class=”item”>Flex item</div>
 <div class=”item”>Flex item</div>
 <div class=”item”>Flex item</div>
</div>

CSS

.flex-container{
 display: flex;
}

「display:flex;」を指定した配下の要素が、Flex itemになります。

FlexboxのプロパティはFlex containerにかけれるプロパティと、Flex Itesにかけれるプロパティがあります。

プロパティ	Value / Initial	備考
flex-direction	[Value] row、row-reverse、column、column-reverse [Initial] row	Flex container内のitemの並びを縦か横に設定デモ
flex-wrap	[Value] nowrap、wrap、wrap-reverse [Initial] nowrap	Flex container内のitemの折り返しの指定デモ
flex-flow	[Value] <flex-direction> \|\| <flex-wrap> [Initial] row nowrap	flex-directionとflex-wrapをまとめて設定
justify-content	[Value] flex-start、flex-end、center、space-between、space-around [Initial] flex-start	横並びの位置を指定（左揃え、右揃え、中央揃え、均等配置）デモ
align-items	[Value] flex-start、flex-end、center、baseline、stretch [Initial] stretch	縦並びの位置を指定（上揃え、下揃え、中央揃え、ベースライン、等幅）デモ
align-content	[Value] flex-start、flex-end、center、space-between、space-around、stretch [Initial] stretch	複数行にまたがった縦並びの位置を指定（上揃え、下揃え、中央揃え、均等配置）デモ

プロパティ	Value / Initial	備考
order	[Value] <integer> [Initial] 0	Flex itemの並び順を指定デモ
flex-grow	[Value] <number> [Initial] 0	Flex itemが画面幅に満たない場合に伸びる倍率 * デモはFlexプロパティに集約
flex-shrink	[Value] <number> [Initial] 1	Flex itemの幅が画面サイズより小さい場合に縮む倍率 * デモはFlexプロパティに集約
flex-basis	[Value] content、<'width'> [Initial] auto	Flex itemの基準幅を設定 * デモはFlexプロパティに集約
flex	[Value] none、[ <‘flex-grow’> <‘flex-shrink’>? \|\| <‘flex-basis’> ] [Initial] 1 0 auto	flex-grow、flex-shrink、flex-basisをまとめて指定デモ
align-self	[Value] auto、flex-start、flex-end、center、baseline、stretch [Initial] auto	Flex itemの縦並び位置を指定デモ