flexboxの基本（縦並び、横並び、中央寄せ、左寄せ、右寄せ） - やったもん勝ち

xflexbox、便利です。 何もしないと、以下のように、block要素は縦に並ぶ See the Pen JWerRv by benzenetarou@gmail.com (@benzenetarou) on CodePen. 親要素にdisplay: flexを設定すると、子要素が横に並ぶ See the Pen WpYZRw by benzenetarou@gmail.com (@benzenetarou) on CodePen. flex-direction: columnを設定すると、再び縦に並ぶ See the Pen XMyepz by benzenetarou@gmail.com (@benzenetarou) on CodePen. flex-direction: rowにして、横に並べてから、justify-content: flex-endを設定すると、右側に詰める。