【CSS】flexを解除したい、その時はdisplay:blockを使おう！

display: flexとは？

display: flexとは「フレックスボックス（フレキシブルボックス）」の事で、要素が並列にする事ができます。
昔はfloatを駆使して作成したのですが、現在ではフレックスボックスがあるので要素の並列レイアウトが随分楽になりました。

設定するとどこまでも並列にしてくれるflex。
ではどんな時にflexを解除したいのか？
それはレスポンシブ対応する時が非常に多いです。

PCでは幅が広いのでレイアウト並列に耐えらますが、スマホでは縦並びにしなければレイアウト上問題がある場合があります。その際flexを設定しているとスマホで横幅がほっそぉ～くなっても並列になってしまいます。

こういった場合、「flexの解除」が必要となります。

flexを解除するには、「display: block;」を使います。
解除したいメディクエリ内に設定する事で解除する事ができます。

PCの場合は並列、スマホの場合は縦並びになる様に設定してみましょう。

<ul>
 <li>要素1</li>
 <li>要素2</li>
 <li>要素3</li>
</ul>

ul{
 display: flex;
}

@media screen and (max-width:600px){
 ul{
  display: block;
 }
}

※マージン等の細かな設定掲載は省いております。

スマホ