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.
左上に寄る配置になっています。要素の高さはstretchのように伸びません。本来の高さになっています。
align-content: flex-end
See the Pen
content_end by taichi (@taichi_na)
on CodePen.
左下に寄る配置になっています。align-content は要素の並び自体は変わらずに、親要素内での位置のみが変更されます。
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.
行間にスペースが開いています。上下の隙間はありません。
まとめ： align-content でwrapになった要素の位置を決めることができました
値は justify-conent と同じなので、感覚はつかみやすいと思います。
他の flex-box についての以下の記事も参考にして、レイアウトのコツをつかんでください！
