今回の記事では、flex-boxで横に並べた要素を縦に表示したい時に使うやり方を紹介いたします。

使う場面はあまり多くはないと思いますが、パソコン版では横並びの状態でもいいけど、スマホ版では縦に並べたい時などあると思います。

まずはflex-boxを使い横並びにした状態から見ていきます。

このように通常通り横に並んで表示されます。

やり方

display: flex;を指定した親要素に対して、flex-direction:columnと指定します。

そうすると・・・

このように縦で表示することができます。

パソコン版では横並び、スマホ版では縦並びなどで使い分けて表示することができます。