【レスポンシブ】flexで横に並べた要素を縦並び（1カラム）にする方法

今回は、flexで横並びにした要素を、縦並び、要するに１カラムにする方法を紹介します。

PCの画面サイズで、flexを使用してブロック要素を横並びにしたとします。
そして、レスポンシブデザインにおけるスマホサイズのレイアウトを作成するとき、
flexを解除して１カラムにしたい。

というケースがあります。

すごく簡単です。
flex-direction: column;　もしくは　 display:block; としてあげましょう。

それでは詳しく見ていきましょう。

横並び（PCサイズを想定）

まず下のコードペンを見てみましょう。
display:flex;で要素が横に並んでいますね。

See the Pen
display:flex; by t.h (@tomtom15)
on CodePen.

縦並び（スマホサイズを想定）

次にスマホサイズを見てましょう。

See the Pen
flex-direction：column by t.h (@tomtom15)
on CodePen.

display:flex;の後に、

flex-direction: column; を加えると縦に並びます。

ちなみに、
display:flex;　を
display:block;
に変更しても縦並びになります。

※メディアクエリ（@media～）のコードは省略しております。

ちょこっと補足

気づいた人はいるかもしれませんが、

横並びは　justify-content: center;　となっていますが、
縦並びは　align-items: center; となっています。

そうです。
flexで縦並びにした要素の中央寄せは　align-items: center;　です。

まとめ

いかがでしたでしょうか。

flexは奥が深いですが、慣れてくるけっこう面白いので、いろいろ試してみてくださいね。

さらに詳しく知りたい方はこちらもどうぞ。
flexのいろいろな解除方法

flex関連の記事も紹介しておきます！