親要素に対して、子要素の幅が100％を超えるときの挙動の整理のため執筆しています。※codepenですが、0.5×で見ていただくと綺麗にみることができます。
パターン1 | 親要素が600pxで子要素を50%ずつにする。
これは非常にシンプルです。
青セクションと赤セクションが半分になっていますね。
See the Pen
widthが100をオーバーするとき by TakahiroOkada (@okalog)
on CodePen.
パターン2 | 子要素間に余白を持たせたい場合。
codepenを見てもらえば分かりますが、文字がつまっていて読みづらいですよね。
多くの方は要素間にmarginやpaddingで余白を持たせると思います。
これを行おうと、このようなコードを書いてみました。
.left{width:50%;background-color:#B0C2FF;}.right{width:50%;margin-left:50px;background-color:#FFA7A7;}結果はこうなります。
See the Pen
width整理-2 by TakahiroOkada (@okalog)
on CodePen.
親要素に対して、,子要素が100%を超えてしまったのでずれてしまっていますね。
パターン3 | widthにcalc指定をして子要素の大きさ100%に調整する。
CSSには、calc()という便利な機能があります。
参考(https://coliss.com/articles/build-websites/operation/css/how-calc-works-by-ire.html)
これを利用し子要素を100％になるように調整します。
See the Pen width整理-3 by TakahiroOkada (@okalog) on CodePen.
子要素が親要素に対して100％になりましたね。
番外編
実は最初flex-wrap:wrap;の指定なし、calc指定なし、margin-left:50px;だけでも綺麗にコンテナに収まっていました。
これはflex-wrapのデフォルトがno-wrapになっていたことで、コンテナからはみ出さないように指定されていたようです。
参考(https://developer.mozilla.org/ja/docs/Web/CSS/flex-wrap)
頭いいですよね。
See the Pen KKgwraz by TakahiroOkada (@okalog) on CodePen.
まとめ
いやー結構曖昧に使っていたので整理されてよかったです。