CSS3のFlexboxが仕様が変わった!!新しいフレキシブルボックスレイアウトとは!?

css

CSS3のフレックスボックスなんですが、もともとフレックスボックスに対する査定が確定していなかったので変更する事もあるんだろうなと思っていましたが、やはり変わっていました。

それに伴って他のフレックスボックスに関連するプロパティも変更になった模様ですが、基本的に横並びにするフレックスボックスはdisplayでflexを指定するだけになったの簡単になったと思いますので、それに関して今回は記事を書いてみました。

これまでのFlexboxの流れ

もともとFlexboxの概念が生まれたのは結構前だったんですが、それから仕様が何回か変わっていきました。ちなみに2013年6月現時点では対応ブラウザはChromeのみのようなので気をつけましょう。

2010年頃 2012年頃 2013年現在
display: box display: flexbox display: flex

まぁ上記を見る限りただflexになっただけで使い方は以前と変わらずです。笑

ただめちゃくちゃ便利です♪今流行りのレスポンシブデザインもFlexboxで組めば応用効きますよ~。

親要素にflexを指定する

前回でも、説明したと思うのですが、Flexboxを使うにはフレキシブルにするボックスの要素をつつむ親要素が必要になります。下記参照

cssでは下記のように、親要素に「display:flex」を指定するだけです。

上記のように指定すると内包される子要素は自動的に横並びになります。まさにフレキシブルボックスレイアウトです。

しかも、各子要素の内容に合わせて自動的に幅も伸縮します。今までだと幅を指定してfloatとかかけてましたが。笑

今回は対応ブラウザも少ないので、webkitだけにベンダープレフィックスを付けています。

Flexboxのいろいろなプロパティ

さて、今回の仕様変更によって他のプロパティも一新されたっぽいのでこちらもいくつかメモっておく。

フレックスボックスの配置方法 – 横並び / 縦並び

親要素のflexを指定すると内包する要素が横並びになりますが、それを縦方向と横方向に指定するプロパティがあるんですが、こちらも今回の査定で変わったようです。

以前のプロパティ 今回のプロパティ
box-orient flex-direction

もうプロパティ名が全く違っています。新しいプロパティは「flex-direction」になりました。

flex-direction:row htmlの記述順に左から右に横並ぶ
flex-direction:column htmlの記述順に上から下に縦に並ぶ

フレックスボックスの配置方法 – 横並び逆順 / 縦並び逆順

今度は、htmlの記述とは逆の順番から並び替えるプロパティです。

flex-direction:row-reverse htmlの記述順に右から左に横並ぶ
flex-direction:column-reverse htmlの記述順に下から上に縦に並ぶ

Flexbox内のの子要素の折り返しするかどうか

子要素が親要素の幅を超えてしまった場合に、折り返すか折り返さないか設定できます。

flex-wrap:wrap 折り返す指定。複数行になります。
flex-wrap:nowrap 折り返さない指定。常に一行です。
flex-wrap:wrap-reverse 折り返して複数行になるが、折り返しが上になる。
子要素の幅を設定していない場合の挙動について

試していただくと分かると思うが「nowrap」の設定の場合は子要素の幅が親要素の幅に合わせて伸縮して一行を維持するので、子要素内のテキストなどは伸縮に伴い改行されたりします。

「wrap」に設定した場合は、折り返すようになるので、「nowrap」の場合とは逆に子要素の幅は維持されたまま、親要素の幅に合わせ子要素自体が複数行に改行される。

ショートカットで簡潔に記述

「flex-direction」と「flex-wrap」のプロパティをショートカットで記載できるプロパティとして「flex-flow」というのがあるようです。

Flexboxの水平方向と垂直方向の位置に関する記事を追加しました

という具合にFlexboxは新しいプロパティが増えたんですが、水平方向と垂直方向に関する記事は下記になります。