スポンサーリンク
スポンサーリンク

フレキシブルボックスレイアウトを使う

久しぶりにCSSの記事を書いていきます。タイトルの通りフレキシブルボックスレイアウトについて書きます。ボックスのサイズや配置を柔軟に設定したり、調整したりできる方法をフレキシブルボックスレイアウトといいます。以前説明したpositionプロパティやfloatプロパティを使ったレイアウトの方法より簡単にレイアウトを指定できるようになります。

サンプルコードの実行結果はこちら

フレックスコンテナ

フレックスアイテムを含む親要素のことで、display「flex」又は、「inline-flex」が指定された要素がフレックスコンテナになります。

displayプロパティ
説明
flex この値が指定された要素を、ブロックレベルのフレックスコンテナボックスにする
inline-flex この値が指定された要素を、インラインレベルのフレックスコンテナボックスにする

フレックスアイテム

フレックスコンテナに含まれる子要素のことで、フレックスコンテナは0個以上のフレックスアイテムを持っています。フレックスコンテナの直接の子要素になっているテキストは、匿名のフレックスアイテムに含まれています。

フレックスコンテナにはレイアウトの基本となる2つの軸という物があります。主軸はフレックスアイテムの配置方向を決める軸で、高左軸は主軸に対して垂直に交わる軸です。フレックスアイテムは主軸に沿って配置されるようになっているので、どちらかが主軸又は高左軸になるかを、flex-directionプロパティを使い指定する必要があります。

flex-directionプロパティ
説明
row(初期値) 主軸の方向は、インライン要素が表示される方向と同じになります。日本語のように左から右に書く文字の場合なら主軸も左から右にとなり、フレックスアイテムを左から右へ並べて配置します。
row-reverse 主軸の方向は、「row」と逆向きになります。日本語のように左から右へ書く文字なら、主軸の方向は右から左となるので、フレックスアイテムを右から左へ並べて配置します。
column 主軸の方向は、ブロックレベル要素が表示される方向と同じになります。日本語のように左から右に書く文字の場合なら主軸の方向は上から下にとなり、フレックスアイテムを上から下へ並べて配置します。
column-reverse 主軸の方向は、「column」と逆向きになります。日本語のように左から右へ書く文字なら、主軸の方向は下から上となるので、フレックスアイテムを下から上へ並べて配置します。

コメント

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