[CSS]そろそろFlexboxをまとめてみる

そろそろFlexboxをまとめてみる

IE10のシェアも全体の1%を切ったということで、そろそろガンガンFlexbox使ってもいいかなと思ったり思わなかったり。
この辺、クライアントにも依存するところはありましてね、柵やらなんやらね。

とは言いましても一般的な話でIE10のシェアが全体の1%を切ったのはstatcounterによれば事実。IE11も7.5%と制作サイトによっては無視していいレベルです。(この辺は色んな考え方もありますが。)
かと言ってEdgeのシェアが増えた訳じゃないんですけどね・・・。

Source: StatCounter Global Stats – Browser Version Market Share

Flexboxとは?

けっこう前から存在はしますが、以前はブラウザによって書き方が違ったり仕様が変わったりで、使うのは困難でした。
しかしモダンブラウザでは難なく使用できるようになりIEのシェアなども手伝い実践で使用しても問題ないかなぐらいになってきたと思います。

Can I use...[flex]

FlexboxはFlexboxコンテナとFlaxboxアイテムからなります。

Flexboxコンテナ

Flexboxを利用するために必ず必要なもので「display:flex」と指定すれば、Flexboxコンテナとして定義されます。

Flexboxアイテム

Flexboxコンテナの子要素で実際にレイアウトされるものです。特にCSSを指定するとこはありません。

「display:flex」のデモ

html

css

これが基本形ですが「justify-content」プロパティを追加すると配置変更も可能です。

justify-content

右揃え

css

中央揃え

css

均等割付

css

均等割付

上の均等割付との違いは両端にスペースが空くことです。
と言うか有効スペースを4等分(メニューが4つなので)して要素を中央の配置します。

css

と様々なレイアウトがあり、flat等に比べると自由度はかなり高いです。

他にも「flex-direction」「flex-wrap」「flex-flow」などなどけっこうプロパティが多いので次回以降、順次紹介していきたいと思います。

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
スポンサーリンク