CSS3のフレックスコンテナについてまとめてみた
CSSのフレックスコンテナについて
CSSで横並び要素を設定する方法を探していた最中、「フレックスコンテナ」というものを見つけました。
どうやらCSS3で新たに実装されたものらしく、こちらを使えばさながらBootstrapのグリットレイアウトの様な機能を実装可能…になるっぽいです！
これは調べてみないと…というわけでちょっと調べてきました。
今回の記事は、この調べた内容について簡単にまとめたものになってます。
※また、今回調べるにあたってCSSリファレンスサイトを大いに参考にさせていただきました。
フレックスコンテナとは?
フレックスコンテナは、CSS3で新たに実装されたものです。
display属性にflexか、もしくはinline-flexという値を設定すると、その要素がフレックスコンテナとなります。
なお、フレックスコンテナでは従来のブロックレイアウトに紐づく属性(vertical-align、::first-line擬似要素、::first-letter擬似要素)は使えなくなりますが…。
代わりに「フレキシブルレイアウト」モジュールという、フレックスコンテナ上でしか指定出来ないCSS属性が使えるようになります。
次にこのフレキシブルレイアウトに関する属性を見ていきましょう。
フレキシブルレイアウトモジュール
フレキシブルレイアウトに関する属性は、下記の8種類です。
- フレックスコンテナの配置・折り返し・配置順序に関する項目
- フレックスコンテナの幅に関する項目
順番に見ていきましょう。
flex-direction
こちらはフレックスコンテナ内の要素の配置方向を指定する属性です。
設定できる値は下記の4つです。
※なおrow-reverseやcolumn-reverseで要素を逆順にしても、中身は逆にはならない(あくまで見え方のみを変えるだけ)
- row(初期値): 左から右に表示、横に要素が連なる形となる
- row-reverse: 左から右に表示、表示順はrowの逆になる(1,2,3,4が4,3,2,1と表示される感じ)
- column: 上から下に表示、縦に要素が連なる形となる
- column-reverse: 上から下に表示、表示順はcolumnの逆になる
flex-wrap
こちらはフレックスコンテナ内の要素の折り返し方法を指定する属性です。
設定できる値は下記の4つです。
※wrapの値を指定すると、ブラウザの幅に合わせて折り返すコンテンツが出来る様になります。
- nowrap(初期値): 折り返しなし
- wrap: 折り返し
- wrap-reverse: 逆方向に折り返し、下から上に積み上がる感じ
flex-flow
こちらは先に出てきたflex-directionとflex-wrapをまとめて指定できる属性です。
下記の様な形で属性の指定ができます。
flex-flow: row wrap;
order
こちらはフレックスコンテナ内の要素の表示順序を指定する属性です。
値の指定には整数値を用い、小さな値を設定すればその要素が最初に表示される様になります。
(例えばソースコードに1,2,3,4と記述してても、2にorder: 1、それ以外にorder: 4と指定すれば2,1,3,4と表示される様になります)
flex-basis
こちらはフレックスコンテナ内の要素の基本の「幅」を数値指定する属性です。
初期値はauto…自動となっており、次の項目にあるflex-shrinkやflex-growによって幅が変更されます。
そして、値の設定には数値+pxやem、%を使います。
なお、ブラウザの幅が縮まると(他の指定との兼ね合いで)フレックスコンテナ内に収まる様、要素が自動拡縮されるので…。
必ずしもこれで設定した幅になるとは限りません。
flex-shrink
こちらはフレックスコンテナ内の要素の縮小率を設定する属性です。
値の指定には整数値を用い、大きな値を設定するとその要素は他の要素よりも縮まる様になります。
また初期値は1で、負の値は指定できません。
なお、0を指定するとその要素は縮まなくなります。
例えば要素1にflex-shrink: 2,要素2にflex-shrink: 1を指定すると、要素1は要素2よりも2倍縮まる様になります。
flex-grow
こちらはフレックスコンテナ内の要素の拡大率を設定する属性です。
flex-shrinkとは逆の属性と考えるといいかもです。
値には整数値を用いるところや、負の値は指定出来ない所も同様です。
ただ、初期値が0になっております。なので、この属性を使って要素を縮まなくする様には出来ません。
flex
こちらは先に出てきたflex-basistpflex-shrink、flex-growをまとめて指定できる属性です。
下記の様な形で属性の指定ができます。
flex: flex-growの値 flex-shrinkの値 flex-basisの値;
なお、先に出てきたこれら3つの属性は、こちらのflex属性でまとめて設定するように推奨されているそうです。
コードサンプル
先に出てきたCSS3属性を用いれば、下記の様なものが実装可能になります。
※今回のコードサンプルにはCODEPENを使ってみました。
サンプル画面を縮小すると、要素が伸び縮みします。是非確認してみてください！
See the Pen CSS3-flex-test by Aik (@aik0aaac) on CodePen.
最後に
ここまで調べて改めて「フレックスコンテナ」について考えてみると…。
確かに、CSS3だけでフレックスコンテンツが実装できそうですが、Bootstrapほど気軽には出来ないかなと感じました。
BootstrapでやるとHTMLに規定のクラスを指定するだけで出来ちゃいますからね。
でもHTMLを汚さずにCSSを指定するだけでフレックスコンテンツが出来ちゃうので…。
かなり良いものであるというのは間違い無いと思います。
Bootstrap等の外部ライブラリに頼れない環境であるならば、めちゃくちゃ重宝されるものではないでしょうか…！
