実現したいレイアウトにあわせて要素の幅を計算していきます。
- flex-wrapの設定
- widthの計算
- メディアクエリーの設定
- widthの再計算
-
Q1
次のコードについて、正しい説明は?
.box { height: 80px; padding: 8px; box-sizing: border-box; width: calc((100% - 8px) / 2); /* (A) */ } @media (min-width: 600px) { .box { width: calc((100% - 16px) / 3); /* (B) */ } }
プレミアムについて詳しくみる
ミニクイズで理解度をチェックできます
2024年9月11日
2024年2月9日
素材ファイルをダウンロードするにはプレミアムプランへの登録が必要です
詳しくみるソースコードを閲覧するにはプレミアムプランへの登録が必要です
詳しくみるデモを閲覧するにはプレミアムプランへの登録が必要です
詳しくみる