CSS基礎 練習問題 58:交差軸方向の配置
Flexbox(display: flex)を使って要素を横に並べた際、それぞれの要素の高さが異なる場合に、垂直方向(交差軸)の配置位置を中央揃えに変更したい。このとき使用する正しいCSSの書き方はどれか。
- flex-directionプロパティを使用して、垂直方向の配置を調整する。
- align-itemsプロパティを使用して、垂直方向の配置を調整する。
- justify-contentプロパティを使用して、垂直方向の配置を調整する。
- align-contentプロパティを使用して、垂直方向の配置を調整する。
- text-alignプロパティを使用して、垂直方向の配置を調整する。
正解と解説を見る
正解:align-itemsプロパティを使用して、垂直方向の配置を調整する。
Flexboxの横並びにおいて、縦方向(交差軸)の揃え方を指定するプロパティを使用するため、該当する説明が正解です。
【正解の理由】
align-itemsプロパティを使うと、Flexboxの交差軸(横並びの場合は垂直方向)におけるアイテムの配置(上揃え、中央揃え、下揃えなど)を調整できます。
【不正解の理由】
• 「flex-directionプロパティ」は、アイテムが並ぶ主軸の方向(縦並びか横並びか)を決めるプロパティであるため誤り
• 「justify-contentプロパティ」は、主軸(横並びの場合は水平方向)の配置を調整するプロパティであるため誤り
• 「align-contentプロパティ」は、アイテムが複数行に折り返された際の行と行の間隔を調整するプロパティであるため誤り
• 「text-alignプロパティ」は、要素内のテキストの水平方向の配置を調整するプロパティであるため誤り