CSS | display:flexを解除する方法

CSS,CSS フレックスボックス

CSSのflexbox(display:flex)を使ったフレックスコンテナーを解除する方法の紹介です。

flexboxを解除する方法

CSSのflexbox(display:flex)を使ったフレックスコンテナーをメディアクエリを使って画面サイズ(ウィンドウサイズ)に合わせて解除したい場合、「display」プロパティを「block」などで上書きします。

.container {
	display: flex;
	flex-wrap: wrap;
}

@media (max-width: 600px) {
	.container {
		display: block;
	}
}

また、以前に活用されていた「float: left;」「clear: left;」のような途中でフレックスコンテナーを解除する、という概念はありません。

リストの並びを途中で解除するには途中からフレックスコンテナーではない要素を追加してつなげるなどの方法がありそうです。

CSS,CSS フレックスボックス

Posted by Yousuke.U