Flexbox -floatを使わないでスマートにレイアウトする方法 - HTML・CSSテックラボ - [SMART]

Flexboxの概要 Flexbox(CSS Flexible Box Layout Module)はレイアウト用に用意されたプロパティで、CSS3から導入されました。レスポンシブのように要素のサイズが固定ではない場合でも、シンプルな記述で柔軟なレイアウトを可能にします。 floatプロパティでは難しかったレイアウトも簡単に実現することができ、次世代のレイアウト方法の標準として期待されています。 簡単な使用例 Flexboxの詳細や使い方の前に、簡単な使用例を紹介します。 <ul class="box"> <li>1</li> <li>2</li> <li>3</li> </ul> flexboxを使うには、親要素のdisplayプロパティの値にflexを指定します。 .box { display: flex; } これだけで次のようにリストが横並びに表示されます。 1 2 3 .box