【HTML&CSS】display:flex;で横並びにしたものを縦に並べたい

2023年6月26日2024年1月21日

「display:flex」プロパティは要素を横に並べる時に使います。
display:flexで横に並べた要素をレスポンシブで縦に並べたい時はどうしたら良いでしょう。

display:flex;で横に並べたものを縦にならべるとき

display:flex;でわざわざ横並びにしたものを縦並びにしたいときはレスポンシブで画面サイズを変更するときです。

画像などが画面からはみ出したり、スマートフォンでも見やすいレイアウトにするため要素を縦に並べます。

display:flex;で横並びにしたものを縦に並べるときはflex-direction: column;を使う

リストは縦にならぶ

リストで画像とテキストをを並べました。
cssを適用しないとこのように縦に並びます。

  <section id="sweets" class="wrapper">
    <h2 class="section-title">sweets</h2>
    <ul>
      <li>
        <img src="img/01.jpg" alt="テキストテキストテキスト">
        <h3 class="content-title">Macaron</h3>
        <p>マカロン</p>
      </li>
      
      <li>
        <img src="img/02.jpg" alt="テキストテキストテキスト">
        <h3 class="content-title">Marshmallow</h3>
        <p>マシュマロ</p>
      </li>
      
      <li>
        <img src="img/03.jpg" alt="テキストテキストテキスト">
        <h3 class="content-title">donut</h3>
        <p>ドーナツ</p>
      </li>
    </ul>
   </section>

display:flex;で横並びにさせる

要素を横並びにするdisplay:flex;は親要素に指定します。

今回子要素の<li>を横並びにしたいので、その親要素の<ul>に「display:flex;」を適用します。

横並びにすることができました。

display: flex;では子要素を横に並べます。
justify-content: space-between;では要素と要素の間に余白を設けます。

#sweets ul {
  display: flex;
  justify-content: space-between;
}
#sweets li {
  width: 32%;
}

スマートフォンでは縦に並べる

@media screen and (max-width: 400px) {

  #sweets ul {
    flex-direction: column;
  }
  #sweets li {
    width: 100%;
    margin-bottom: 30px;
  }

}

画面サイズが小さいスマートフォンではflex-direction: column;で縦に並ぶようにします。

＊＊＊＊＊＊＊＊＊＊

＜未経験でも安心完全無料のプログラミングスクール＞

flex-directionプロパティはflexの配置方向を指定するプロパティ

flex-directionプロパティはflexの配置方向を指定するプロパティです。

display:flex;を指定した上で追加で記述します。

まとめ

＜未経験でも安心完全無料のプログラミングスクール＞