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

2022-06-242022-07-05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;」のような途中でフレックスコンテナーを解除する、という概念はありません。

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