CSSにおけるフレックスボックスの交差軸方向の配置

それでは、ブロックを交差軸方向にも配置していきましょう。 この軸方向の配置は、align-itemsプロパティで指定します。 値flex-startは要素を軸の始点に寄せ、値flex-endは終点に寄せます。

例を見てみましょう。

例

主軸の方向を左から右に設定しましょう。この場合、交差軸の方向は上から下になります。 主軸方向と交差軸方向の両方で、ブロックの位置を調整してみます。

主軸方向では、ブロックを軸の始点、つまり左端に寄せます。 そのためにjustify-contentの値をflex-startに設定します。 交差軸方向でも、ブロックを軸の始点、つまり上端に寄せます。 そのためにalign-itemsの値もflex-startに設定します。

結果を見てみましょう：

css.parent {
  display: flex;
  flex-direction:  row;        /* 主軸は右方向、交差軸は下方向 */
  justify-content: flex-start; /* ブロックを主軸の始点に */
  align-items:     flex-start; /* ブロックを交差軸の始点に */
}

コードの実行結果：

例

今度は、ブロックを交差軸の終点、つまり下端に寄せてみましょう。 そのためにalign-itemsの値をflex-endに設定します：

css.parent {
  display: flex;
  flex-direction:  row;        /* 主軸は右方向、交差軸は下方向 */
  justify-content: flex-start; /* ブロックを主軸の始点に */
  align-items:     flex-end;   /* ブロックを交差軸の終点に */
}

コードの実行結果：

例

次に、主軸の方向を上から下に設定しましょう。 主軸が垂直になるので、交差軸の方向は右から左になります。 両方の軸の始点にブロックを寄せてみましょう：

css.parent {
  display: flex;
  flex-direction:  column;     /* 主軸は下方向、交差軸は右方向 */
  justify-content: flex-start; /* ブロックを主軸の始点に */
  align-items:     flex-start; /* ブロックを交差軸の始点に */
}

コードの実行結果：

例

今度は、交差軸方向でブロックをその終点に寄せてみましょう：

css.parent {
  display: flex;
  flex-direction:  column;     /* 主軸は下方向、交差軸は右方向 */
  justify-content: flex-start; /* ブロックを主軸の始点に */
  align-items:     flex-end;   /* ブロックを交差軸の終点に */
}

コードの実行結果：

例

両方の軸の終点にブロックを寄せてみましょう：

css.parent {
  display: flex;
  flex-direction:  column;   /* 主軸は下方向、交差軸は右方向 */
  justify-content: flex-end; /* ブロックを主軸の終点に */
  align-items:     flex-end; /* ブロックを交差軸の終点に */
}

コードの実行結果：

例

主軸の方向を変更してみましょう - 下から上に向けます。 この場合でも、主軸が垂直のままなので、交差軸の方向は変わりません。

両方の軸の始点にブロックを寄せます：

css.parent {
  display: flex;
  flex-direction:  column-reverse; /* 主軸は上方向、交差軸は右方向 */
  justify-content: flex-start;     /* ブロックを主軸の始点に */
  align-items:     flex-start;     /* ブロックを交差軸の始点に */
}

コードの実行結果：

実践的な課題