CSS3 – floatはいらない2 – display: flex;


CSS3でフレキシブルレイアウトしたいときに簡単に使える『display:flex;』

段組レイアウトでフロートしてるとカラム落ちしてしまったり、記述がややこしく各要素の高さも揃わないなど難しいことがありました。
flexコンテナーを使うと、「ボックスの横並びが簡単」「各ボックスの高さが自動で揃う」「ボックスの表示順を指定できる」などなど、フレキシブルなボックスレイアウトが出来るということで実際にやってみましょう。

html5用基本テンプレ

flexコンテナーを使うときの基本。

  • 親要素にdisplay: flex;を与えることで「flexコンテナー」となる。
  • 親要素内の子要素「flexアイテム」をどのように並べるか指定する。

では実際にやってみましょう。

divで作ったボックス4つとそれを包む親のボックスを作成。
(2番目のボックスだけ文字数を多くしてます。)

cssではdivの親要素(ここではid=flexbox)に dispay: flex; を与えるだけ。
*safari以外の最新のブラウザは対応。safari用にベンダープレフィックスが必要。他IE10などの下位バージョンのブラウザに対応させるにはベンダープレフィックスが必要。
*flexの対応状況は「Can I use… Support tables for HTML5, CSS3, etc」を参照。

標準では文字数の多い2番目のボックスが広がり高さを自動で調節するようですね。
displayflex


次に各ボックスの横幅を均等にしてみます。
均等にするには、子要素「flexアイテム」(ここでは親要素のdiv#flexboxの中に入っている4つのdiv)に flex: 1; を与えるだけ。

すごく簡単に横幅が均等になるよう揃えられた。
displayflex


子要素のflexアイテムを縦に並べるのも簡単に。
親要素flexコンテナーに flex-direction: column; を与えるだけ。

displayflex


メディアクエリを使い、狭い画面になったときに並びが変わるように配置すればレスポンシブウェブデザインも簡単に作れそう。
(以下サンプルサイト・・・画面サイズが768px以下のサイズになったときに横並びから縦並びに。)

サンプルサイト(画面幅を狭めると縦並びの配置になります。)と、ここまで簡単にほんの一部、flexコンテナーについてやってみましたが、まだまだ配置の動作や指定方法など種類がいくつかあります。
例えば、

    • ボックスの順番を変える。
    • ボックスの横幅の割合を変える。
    • はみ出たボックスの折り返しの設定。
    • ボックス中央にアイテムを配置。

などなど。慣れるまでは難しく感じるflexコンテナーですが、これからのフレキシブル、レスポンシブはこれで決まっていくような気もしますね・・・。

CSS flexible box の利用 – Web developer guide | MDN

 

 


この投稿へのコメント

コメントはありません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

この投稿へのトラックバック

  1. 8月27日の注目記事 | Javable.Jp said on 2015年8月28日 at 12:44 AM

    […] CSS3 – floatはいらない2 – display: flex; | みずかず […]

トラックバック URL