2022年11月22日火曜日

CSS: display:flexで上下左右中央配置

CSSのdisplay:flexを使うと、子要素が均等に横並びになってしまいます。

子要素を幅100%で縦並びにしたい場合は、flex-direction: column; を追記します。

{

    display: flex;
    justify-content: center; /*左右中央配置*/
    align-items: center; /*上下中央配置*/
    flex-direction: column; /*子要素を縦並びにする*/
}

flex-direction: column; を指定することで、子要素が複数あったら縦に並ぶようになります。