###やりたいこと
このようなコードがあったとします。
HTML
1<div id="parent"> 2 <div class="child><img src="sample.png"></div> 3 <div class="child><img src="sample.png"></div> 4 <div class="child><img src="sample.png"></div> 5</div>
CSS
1#parent{ 2display: flex; 3flex-wrap: wrap; 4position: relative; 5} 6 7 .child{ 8 position: absolute; 9 height: 100px; 10 width: 200px; 11 clip: rect(2px, 198px, 98px, 2px);
clipを使って大きさが決まってない要素に対して等しい幅の隙間を開けたいと思っています。
しかしclipを使うためにはposition: absolute;にしなくてはならず、そうするとdisplay: flex;が利きません。
というよりすべての.childが重なってしまいます。
###なぜmarginを使わないか
上の画像はWindowsのニュースアプリのもので、僕が作っているものではありませんがこれを例とさせていただきます。
青い矢印の先を見ていただきたいのですが、
上の2枚の写真の隙間と下の2枚の写真の隙間の幅が異なっています。
これを避けたいと思っています。
すべての要素の幅が同じであればmarginで事足りるのですが、
横幅が倍のものなどが混在しますので単にmarginで隙間を開けただけだと上の写真のようなレイアウトになってしまいました。
###聞きたいこと
どうすればclipを使いつつ要素を並べることができるでしょうか?
よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー