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%;
}
この記事が良かったら応援クリック🌿 励みになります✨
