よく使うfelx-box。

簡単に指定した要素を横並びにできるのでとても便利です。

ですが、画面幅によっては縦に表示したい・・・

スマホ版は縦で表示したい・・・

そんな時に使うやり方を今回の記事で紹介いたします。

通常時は横並びになります。

スマホ版などでは窮屈になるので縦で表示したい・・・

そこでflex-direction: column;を指定します。

使い方

display: flex;で指定した親要素にflex-direction: column;と指定するだけです。

すると・・・

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