CSSのFlexboxで、フレックスアイテムを主軸(main axis)方向に配置・整列するために使うプロパティはどれですか?
1〜4キーで選択、Enterで回答できます
解説
正解は「justify-content」です。Flexbox(要素を1方向に並べるレイアウト方式)では、アイテムを並べる方向を主軸、それに直交する方向を交差軸と呼びます。主軸方向の配置や余白の分配を制御するのが justify-content です。justify-content の主な値と使い方親要素(フレックスコンテナ)に指定し、子要素(フレックスアイテム)の並べ方を決めます。.container { display: flex; /* 子要素がフレックスアイテムになる */ justify-content: space-between; /* 両端に寄せ、残りの余白を均等に分配 */ }flex-start:主軸の始点側に寄せますcenter:中央に寄せますspace-between:両端のアイテムを端に置き、間を均等にしますspace-evenly:両端も含めたすべての隙間を均等にしますalign-items・align-content・flex-direction との違い「align-items」は交差軸方向の揃え方を指定します。「align-content」も交差軸方向ですが、flex-wrap: wrap で複数行になったときの行全体の配置に作用するため、1行だけのときは効果が見えません。「flex-direction」は主軸の向き(row や column)を決めるプロパティで、その軸の上でどう配置するかは制御しません。flex-direction: column にすると justify-content は縦方向に効くjustify-content は横方向、align-items は縦方向と覚えていると、flex-direction: column にしたときに混乱します。column では主軸が縦になるため、justify-content: center は上下中央、align-items: center は左右中央に作用します。また、縦方向の中央寄せが効かないときは、コンテナに高さが指定されているかも確認しましょう。高さが中身ぶんしかないと余白が生まれず、配置が変わって見えません。参考justify-content - CSS | MDN