flex-wrap で複数行にした要素を並び替えるプロパティ align-content を使ってみましょう。
現在のレイアウトはフレックスボックスが主流です。
ばっちり身に着けて、レスポンシブWEBサイトを構築できるようになりましょう!
【align-content】複数行になった要素を並び替える
align-content: stretch
See the Pen content_stretch by taichi (@taichi_na) on CodePen.
これはデフォルトの状態です。上の例のように要素に高さを設定していない場合は親要素の枠いっぱいまで広がります。wrap状態なので改行されて2列になっていますね。
wrapについては以下の記事も参考にしてください。
【flexbox】flexwrapでアイテムを複数行に並べる方法
align-content: flex-start
See the Pen Untitled by taichi (@taichi_na) on CodePen.
align-content: flex-end
See the Pen content_end by taichi (@taichi_na) on CodePen.
align-content: center
See the Pen content_center by taichi (@taichi_na) on CodePen.
align-content: space-around
See the Pen content_around by taichi (@taichi_na) on CodePen.
align-content: space-between
See the Pen contentbetween by taichi (@taichi_na) on CodePen.