CSSで縦並びのレイアウトにする方法

Hiro先生のマルチ情報・技術ブログ。技術・生活・思考から、より良き人生へ繋がるヒントを発信。

※当サイトは、Google Adsense、Amazonアソシエイト、各種アフィリエイト広告を利用しています。また、製品PRを行っている場合があります。

例えばdivなどでレイアウトを行う際に、縦並びにしたい場合があります。

そんなときは、以下コードにて、flexboxで縦並びにするとよいです。

お試しください。

使い方は、親要素に以下CSSを追加することでその内部が縦並びになります。

.wrap {
  display:flex;
  flex-flow: column;
}

見本

HTML

<div class="wrap">
<div class="yoyoyo">aaaaa</div>
<div class="yoyoyo">bbbb</div>
<div class="yoyoyo">cccc</div>
</div>

CSS

.wrap {
  display:flex;
  flex-flow: column;
}

.yoyoyo{
padding:10px;
background-color:red;
color:#fff;
margin:10px auto;
width:50%;
}

＼応援ありがとうございます🌿／
各種ブログランキングに参加しています✨

Hiro先生

おかげさまで豊かさに満たされた日々を
今、素敵に生きています
感謝の種まきによって人生が根底から変わることを知って
素敵なご縁の輪を広げながら、
望む未来を叶える、奇跡を起こし続けるお手伝いをしています。