Flexboxの概要

開発者メモ

Flexboxモデルはもともと複雑化したWebアプリのレイアウトを組みやすくすることを目的に開発したものだと思いますが、時代の流れ的にはレスポンシブデザインなどにも応用できたかと。

第一歩、「display:flex」 お馴染みのBoxモデルであれば「block」を指定するところを「flex」で指定してあげることで、その要素を「Flexbox」コンテナーとして定義することができます。 Flexboxを使うには必ず「Flexboxコンテナー」を作成しておく必要があるので、Flexboxモデルを使う第一歩として、まずは以下のようにします。

#wrapper{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; }

コメント

タイトルとURLをコピーしました