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/

 

活用例

弊社CPIページの「目的別からプランを選ぶ」は、従来の floats と clearfixによりレイアウトコーディングされています。
各ボックスは、横幅と高さが固定されており、長い文字列を入れるとレイアウトが崩れますし、画面幅に合わせてレイアウトが変わることもありません。

 

Flexboxを使いレイアウトをコーディングすると下記のようになります。

画面サイズに合わせて、各ボックスが折り返したり、各ボックスのサイズが可変したりします。
ソースコードを見ると分かりますが、これまでよりも少ないコードで簡単に記述をすることができます。

 

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のプロパティ

 

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

Flex Container用のプロパティ

プロパティ 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

複数行にまたがった縦並びの位置を指定(上揃え、下揃え、中央揃え、均等配置)

デモ

 

Flex item用のプロパティ

プロパティ 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の縦並び位置を指定

デモ

 

関連リンク

 

 

またこのコンテンツはMdN Design Interactive との共同コンテンツ「CPIエバンジェリストのお悩み相談室」でも紹介されています。
合わせましてよろしくお願いいたします。

 

関連タグ: 

この記事をシェアする:

Author
この記事を書いた人:阿部 正幸

KDDIウェブコミュニケーションズ
クラウドホスティング事業本部 エバンジェリスト

CPIスタッフブログ編集長。ACE01,SmartReleaseをリリース後、現職の「エバンジェリスト」として、web制作に関する様々なイベントに登場

Line@登録よろしくお願いします

Web制作に関する情報や、CPIノベルティのプレゼント、サーバーの無償提供などを定期的に発信しています。
ぜひ、登録ください。