ホーム / PC全般 /

【flexbox】align-contentでwrapのかかった要素を配置変更する

2021/12/04

PC全般

t f B! P L

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 についての以下の記事も参考にして、レイアウトのコツをつかんでください！





QooQ