Flexレイアウトの概要
2009年にW3Cが発表したFlexレイアウトは、柔軟で応答性のあるWebページ構築を実現するための新たなレイアウトモデルです。現在ではすべての主要ブラウザがサポートしており、安全に利用できます。
Flexレイアウトの基本原理
Flexible Boxの略称であるFlexは、フレキシブルなボックスモデルを提供します。任意のHTML要素をFlexコンテナとして設定可能です。
.flexContainer {
display: flex;
}重要な用語定義
Flexレイアウトには2つの主要な要素があります：
1. フレックスコンテナ
- Flexレイアウトを適用した要素を指し、通常「コンテナ」と呼ばれます
- デフォルトでは水平方向(X軸)のメイン軸と垂直方向(Y軸)のクロス軸が存在します
- 内部の要素はデフォルトで水平方向に配置され、自動的に折り返しはしません
2. フレックスアイテム
コンテナ内の直下の子要素は自動的にFlexアイテムとなり、「アイテム」と呼ばれます。
コンテナのプロパティ設定
1. アイテムの配置方向 - flexDirection
.flexContainer {
flexDirection: row | rowReverse | column | columnReverse;
}- row: 水平方向(左から右)に配置(デフォルト)
- rowReverse: 水平方向(右から左)に配置
- column: 垂直方向(上から下)に配置
- columnReverse: 垂直方向(下から上)に配置
2. 自動折り返し制御 - flexWrap
デフォルトではすべてのアイテムが1行に並びますが、必要に応じて折り返しを設定できます。
.flexContainer {
flexWrap: noWrap | wrap | wrapReverse;
}- noWrap: 折り返さない(デフォルト)
- wrap: 折り返し、最初の行が上部に配置
- wrapReverse: 折り返し、最初の行が下部に配置
3. 配置と折り返しのショートハンド - flexFlow
flexDirectionとflexWrapの組み合わせショートハンドで、デフォルト値は「row noWrap」です。
.flexContainer {
flexFlow: <flexDirection> <flexWrap>;
}4. メイン軸方向の配置 - justifyContent
水平軸(X軸)または垂直軸(Y軸)に沿った配置を制御します。
.flexContainer {
justifyContent: flexStart | flexEnd | center | spaceBetween | spaceAround;
}- flexStart: 左揃え(デフォルト)
- flexEnd: 右揃え
- center: 中央揃え
- spaceBetween: 両端揃え、アイテム間のスペースは均等
- spaceAround: 周囲に均等なスペースを配置
5. クロス軸方向の配置 - alignItems
メイン軸がX軸の場合は垂直方向、Y軸の場合は水平方向の配置を制御します。
.flexContainer {
alignItems: stretch | flexStart | flexEnd | center | baseline;
}- stretch: 高さが指定されていない場合、コンテナ全体を埋める(デフォルト)
- flexStart: コンテナの上部に揃える
- flexEnd: コンテナの下部に揃える
- center: コンテナの中央に揃える
- baseline: テキストのベースラインで揃える
6. 複数行の配置 - alignContent
複数行が存在する場合の行全体の配置方法を定義します。単一行の場合には効果がありません。
.flexContainer {
alignContent: flexStart | flexEnd | center | spaceBetween | spaceAround | stretch;
}アイテムのプロパティ設定
1. 表示順序 - order
orderプロパティでアイテムの表示順序を指定します。数値が小さいほど前に配置されます。
.flexItem {
order: <整数>;
}2. 空き領域の拡大割合 - flexGrow
空き領域がある場合の拡大比率を定義します。
.flexItem {
flexGrow: <数値>; /* デフォルトは0 */
}- デフォルト0: 空き領域があっても拡大しない
- すべてが1の場合: 空き領域を均等に分配
- 特定アイテムが2の場合: 他のアイテムの2倍の空間を占有
3. 空き領域の縮小割合 - flexShrink
スペースが不足した際の縮小比率を定義します。
.flexItem {
flexShrink: <数値>; /* デフォルトは1 */
}- デフォルト1: スペース不足時に縮小
- すべてが1の場合: 等比率で縮小
- 特定アイテムが0の場合: 縮小しない
4. 初期サイズ - flexBasis
余白を分配する前のアイテムの初期サイズを定義します。
.flexItem {
flexBasis: <長さ> | <パーセンテージ> | auto; /* デフォルトはauto */
}- auto: アイテムの元のサイズを使用
- 長さ: 固定サイズを指定(例: 300px)
- パーセンテージ: 親コンテナに対する割合
5. 伸縮とサイズのショートハンド - flex
flexGrow、flexShrink、flexBasisのショートハンドプロパティです。
.flexItem {
flex: none | [ <flexGrow> <flexShrink>? || <flexBasis> ]
}- デフォルト: 0 1 auto
- 便利なショートカット: auto (1 1 auto) と none (0 0 auto)
6. 個別配置 - alignSelf
特定のアイテムに対してalignItemsとは異なる配置を指定できます。
.flexItem {
alignSelf: auto | flexStart | flexEnd | center | baseline | stretch;
}- auto: 親要素のalignItemsプロパティを継承