CSSにおけるフレックスボックスの交差軸方向の配置
それでは、ブロックを交差軸方向にも配置していきましょう。
この軸方向の配置は、align-itemsプロパティで指定します。
値flex-startは要素を軸の始点に寄せ、値flex-endは終点に寄せます。
例を見てみましょう。
例
主軸の方向を左から右に設定しましょう。この場合、交差軸の方向は上から下になります。 主軸方向と交差軸方向の両方で、ブロックの位置を調整してみます。
主軸方向では、ブロックを軸の始点、つまり左端に寄せます。
そのためにjustify-contentの値をflex-startに設定します。
交差軸方向でも、ブロックを軸の始点、つまり上端に寄せます。
そのためにalign-itemsの値もflex-startに設定します。
結果を見てみましょう：
.parent {
display: flex;
flex-direction: row; /* 主軸は右方向、交差軸は下方向 */
justify-content: flex-start; /* ブロックを主軸の始点に */
align-items: flex-start; /* ブロックを交差軸の始点に */
}
コードの実行結果：
例
今度は、ブロックを交差軸の終点、つまり下端に寄せてみましょう。
そのためにalign-itemsの値をflex-endに設定します：
.parent {
display: flex;
flex-direction: row; /* 主軸は右方向、交差軸は下方向 */
justify-content: flex-start; /* ブロックを主軸の始点に */
align-items: flex-end; /* ブロックを交差軸の終点に */
}
コードの実行結果：
例
次に、主軸の方向を上から下に設定しましょう。 主軸が垂直になるので、交差軸の方向は右から左になります。 両方の軸の始点にブロックを寄せてみましょう：
.parent {
display: flex;
flex-direction: column; /* 主軸は下方向、交差軸は右方向 */
justify-content: flex-start; /* ブロックを主軸の始点に */
align-items: flex-start; /* ブロックを交差軸の始点に */
}
コードの実行結果：
例
今度は、交差軸方向でブロックをその終点に寄せてみましょう：
.parent {
display: flex;
flex-direction: column; /* 主軸は下方向、交差軸は右方向 */
justify-content: flex-start; /* ブロックを主軸の始点に */
align-items: flex-end; /* ブロックを交差軸の終点に */
}
コードの実行結果：
例
両方の軸の終点にブロックを寄せてみましょう：
.parent {
display: flex;
flex-direction: column; /* 主軸は下方向、交差軸は右方向 */
justify-content: flex-end; /* ブロックを主軸の終点に */
align-items: flex-end; /* ブロックを交差軸の終点に */
}
コードの実行結果：
例
主軸の方向を変更してみましょう - 下から上に向けます。 この場合でも、主軸が垂直のままなので、交差軸の方向は変わりません。
両方の軸の始点にブロックを寄せます：
.parent {
display: flex;
flex-direction: column-reverse; /* 主軸は上方向、交差軸は右方向 */
justify-content: flex-start; /* ブロックを主軸の始点に */
align-items: flex-start; /* ブロックを交差軸の始点に */
}
コードの実行結果：
