※当サイトは、Google Adsense、Amazonアソシエイト等アフィリエイト広告を利用しています。

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

CSS

例えば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%;
}

CSS

Posted by Hiro先生