問題 × 解決策

flexboxでスマートフォン時だけ縦並びにする方法

問題

flexboxでスマートフォン時だけ縦並びにするには?

解決策

スマートフォン時に「flex-direction: column;」を設定する。

 

flexboxで並べ方を切り替える。

flexboxでスマートフォン時だけ縦並びにする方法方法をご紹介します。

DEMOはこちら

  • スマートフォン時は
    縦並びになります。
  • スマートフォン時は
    縦並びになります。
  • スマートフォン時は
    縦並びになります。

HTMLはこちら

<ul class="flexvt-list">
	<li>スマートフォン時は<br>縦並びになります。</li>
	<li>スマートフォン時は<br>縦並びになります。</li>
	<li>スマートフォン時は<br>縦並びになります。</li>
</ul>

CSSはこちら

  1. スマートフォン時に「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;
	}
}

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ten + 17 =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧