CSSのdisplay:flexを使うと、子要素が均等に横並びになってしまいます。
子要素を幅100％で縦並びにしたい場合は、flex-direction: column; を追記します。
{
display: flex;
justify-content: center; /*左右中央配置*/
align-items: center; /*上下中央配置*/
flex-direction: column; /*子要素を縦並びにする*/
}
flex-direction: column; を指定することで、子要素が複数あったら縦に並ぶようになります。
