マンガでわかるホームページ作成

CSS display:flexで縦並びする方法4選

「パスコン版で横並べにした要素をスマホ版で縦並びにしたい」

「上下中央寄せのためにdisplay:flexを使ったが子要素を縦並びにしたい」

というあなたへCSS display:flexで縦並びする方法を4種類解説します。

方法1.flex-direction:columnを指定する

1
2
3

flex-directionはflexを指定した要素内の並びの向きを指定するCSSです。display:flexを指定した要素に合わせて指定します。

flex-direction: row(初期値)

「→」左から右へ

1
2
3

初期値のため基本的に設定不要です。

flex-direction: row-reverse

「←」右から左へ

1
2
3

float:rightに似ていて右寄せになります。

flex-direction: column

「↓」上から下へ

1
2
3

縦並びにしたいならこれです。

flex-direction: column-reverse

「↑」下から上へ

1
2
3

方法2.flex-wrap:wrap かつ子要素width:100%

1
2
3

flex-wrap:wrapはdisplay:flexの折り返しを許可するCSSです。

初期値はflex-wrap:nowrapであり、折り返しが許可されていません。

flex-wrap:wrapをdisplay:flexを指定した要素に合わせて指定します。

折り返しを許可しただけではまだ横並びのままです。

子要素のwidthを100%にします。これにより折り返しされ縦並びとなります。

※marginやpaddingに合わせてwidthがはみ出ないように調整しましょう。

方法3.divなどで囲む

1
2
3

display:flexによって横並びするのは子要素だけで孫要素には影響ありません。

縦並びしたい要素をdivなどで囲むことでflexの影響を受けないようにできます。

方法4.display:blockにする

display:flexでなくてもいいから縦並べになればいいのであれば、display:flexを指定した要素にdisplay:blockを上書きで指定し、display:flexを解除してしまう方法もあります。

display:flexを解除する方法は下記を参考にしてください。

まとめ

方法1.flex-direction:columnを指定する

display:flexの要素を上から下へ並べるCSSです。

方法2.flex-wrap:wrap かつ子要素width:100%

折り返しできるようにしたうえで折り返しさせる幅にします。

方法3.divなどで囲む

縦並びしたい要素をdivなどで囲み、flexの影響を受けないようにします。

方法4.display:blockにする

display:flexを解除し横並べさせないようにします。

以上、CSS display:flexで縦並びする方法でした。

関連記事