問題
flexboxでスマートフォン時だけ縦並びにするには？
解決策
スマートフォン時に「flex-direction: column;」を設定する。
flexboxで並べ方を切り替える。
flexboxでスマートフォン時だけ縦並びにする方法方法をご紹介します。
DEMOはこちら
- スマートフォン時は
縦並びになります。 - スマートフォン時は
縦並びになります。 - スマートフォン時は
縦並びになります。
HTMLはこちら
<ul class="flexvt-list">
<li>スマートフォン時は<br>縦並びになります。</li>
<li>スマートフォン時は<br>縦並びになります。</li>
<li>スマートフォン時は<br>縦並びになります。</li>
</ul>CSSはこちら
- スマートフォン時に「flex-direction: column;」を設定することで、縦並びに変更することができます。
.flexvt-list{
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
}
.flexvt-list > li{
margin: 0 10px 10px 0;
padding: 10px;
color: #F15A24;
font-weight: bold;
background-color: #FCECE8;
}
@media only screen and (max-width: 767px) {
.flexorder-box{
flex-direction: column;
}
.flexvt-list > li{
margin-right:0;
}
}
コメント