質問編集履歴
6
改善
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -23,6 +23,7 @@
|
|
|
23
23
|
```
|
|
24
24
|
clipを使って大きさが決まってない要素に対して等しい幅の隙間を開けたいと思っています。
|
|
25
25
|
しかしclipを使うためにはposition: absolute;にしなくてはならず、そうするとdisplay: flex;が利きません。
|
|
26
|
+
というよりすべての.childが重なってしまいます。
|
|
26
27
|
###なぜmarginを使わないか
|
|
27
28
|
|
|
28
29
|
上の画像はWindowsのニュースアプリのもので、僕が作っているものではありませんがこれを例とさせていただきます。
|
5
追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -28,7 +28,9 @@
|
|
|
28
28
|
上の画像はWindowsのニュースアプリのもので、僕が作っているものではありませんがこれを例とさせていただきます。
|
|
29
29
|
青い矢印の先を見ていただきたいのですが、
|
|
30
30
|
上の2枚の写真の隙間と下の2枚の写真の隙間の幅が異なっています。
|
|
31
|
-
これを避けたいと思っています
|
|
31
|
+
これを避けたいと思っています。
|
|
32
|
+
すべての要素の幅が同じであればmarginで事足りるのですが、
|
|
33
|
+
横幅が倍のものなどが混在しますので単にmarginで隙間を開けただけだと上の写真のようなレイアウトになってしまいました。
|
|
32
34
|
###聞きたいこと
|
|
33
35
|
どうすればclipを使いつつ要素を並べることができるでしょうか？
|
|
34
36
|
よろしくお願いいたします。
|
4
スクリーンショットを間違えました
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
clipを使って大きさが決まってない要素に対して等しい幅の隙間を開けたいと思っています。
|
|
25
25
|
しかしclipを使うためにはposition: absolute;にしなくてはならず、そうするとdisplay: flex;が利きません。
|
|
26
26
|
###なぜmarginを使わないか
|
|
27
|
-
|
|
28
28
|
上の画像はWindowsのニュースアプリのもので、僕が作っているものではありませんがこれを例とさせていただきます。
|
|
29
29
|
青い矢印の先を見ていただきたいのですが、
|
|
30
30
|
上の2枚の写真の隙間と下の2枚の写真の隙間の幅が異なっています。
|
3
横をそろえたい旨を追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -23,6 +23,12 @@
|
|
|
23
23
|
```
|
|
24
24
|
clipを使って大きさが決まってない要素に対して等しい幅の隙間を開けたいと思っています。
|
|
25
25
|
しかしclipを使うためにはposition: absolute;にしなくてはならず、そうするとdisplay: flex;が利きません。
|
|
26
|
+
###なぜmarginを使わないか
|
|
27
|
+
|
|
28
|
+
上の画像はWindowsのニュースアプリのもので、僕が作っているものではありませんがこれを例とさせていただきます。
|
|
29
|
+
青い矢印の先を見ていただきたいのですが、
|
|
30
|
+
上の2枚の写真の隙間と下の2枚の写真の隙間の幅が異なっています。
|
|
31
|
+
これを避けたいと思っています
|
|
26
32
|
###聞きたいこと
|
|
27
33
|
どうすればclipを使いつつ要素を並べることができるでしょうか？
|
|
28
34
|
よろしくお願いいたします。
|
2
追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -2,11 +2,9 @@
|
|
|
2
2
|
このようなコードがあったとします。
|
|
3
3
|
```HTML
|
|
4
4
|
<div id="parent">
|
|
5
|
-
<div class="child></div>
|
|
5
|
+
<div class="child><img src="sample.png"></div>
|
|
6
|
-
<div class="child></div>
|
|
6
|
+
<div class="child><img src="sample.png"></div>
|
|
7
|
-
<div class="child></div>
|
|
7
|
+
<div class="child><img src="sample.png"></div>
|
|
8
|
-
<div class="child></div>
|
|
9
|
-
<div class="child></div>
|
|
10
8
|
</div>
|
|
11
9
|
```
|
|
12
10
|
|
1
HTMLを追加しました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,5 +1,15 @@
|
|
|
1
1
|
###やりたいこと
|
|
2
2
|
このようなコードがあったとします。
|
|
3
|
+
```HTML
|
|
4
|
+
<div id="parent">
|
|
5
|
+
<div class="child></div>
|
|
6
|
+
<div class="child></div>
|
|
7
|
+
<div class="child></div>
|
|
8
|
+
<div class="child></div>
|
|
9
|
+
<div class="child></div>
|
|
10
|
+
</div>
|
|
11
|
+
```
|
|
12
|
+
|
|
3
13
|
```CSS
|
|
4
14
|
#parent{
|
|
5
15
|
display: flex;
|