CSS3 の可変ボックス ( Flexbox ) レイアウトが超絶便利そう！

CSS3 の Flexbox を使うと、複雑なレイアウトが簡単に実現できるようです。

この記事の目次非表示

Flexbox モデルの構造

HTML の構造は次のようになります。

<div style="display:flex;"> ← Flexbox コンテナ
    <div>A</div> ← Flexbox アイテム
    <div>B</div> ← Flexbox アイテム
    <div>C</div> ← Flexbox アイテム
</div>

Flexbox モデルを使うには、Flexbox コンテナが必要です。 CSS3 で [ display:flex ] と指定した要素が Flexbox コンテナとなります。

flex-direction
子要素の配置方向
flex-wrap
子要素を折り返すかどうか
justify-content
子要素の揃え方。 flex-direction = 水平方向の場合、右揃え・中央揃え・左揃えなど。均等に間隔を空ける設定もできます。
align-items
子要素の揃え方。 flex-direction = 水平方向の場合、上揃え・中央揃え・下揃えなど。親要素の高さいっぱいに伸ばす設定もできます。
align-content
複数行になった時の子要素の揃え方。 flex-direction = 水平方向の場合、上揃え・中央揃え・下揃えなど。均等に間隔を空ける設定もできます。

order
表示の順番を指定
flex: flex-grow flex-shrink flex-basis
次の３つのプロパティをショートハンドで書いています。
flex-grow = 領域が余った場合にアイテムが伸びる倍率 ( 0 = 伸びない )
flex-shrink = 領域をはみ出た場合にアイテムが縮む倍率 ( 1 = 縮まない？ )
flex-basis = アイテムのベースとなる長さ
align-self
個別のアイテムの揃え方 flex-direction = 水平方向の場合、上揃え・中央揃え・下揃えなど。親要素の高さいっぱいに伸ばす設定もできます。