回答編集履歴
1
コード追記
answer
CHANGED
|
@@ -30,7 +30,6 @@
|
|
|
30
30
|
|
|
31
31
|
.wrapper>div {
|
|
32
32
|
width: 100px;
|
|
33
|
-
flex-shrink: 0;
|
|
34
33
|
box-sizing: border-box;
|
|
35
34
|
border: 1px solid red;
|
|
36
35
|
}
|
|
@@ -40,6 +39,7 @@
|
|
|
40
39
|
width: 100px;
|
|
41
40
|
}
|
|
42
41
|
```
|
|
42
|
+
[CodePenサンプル](https://codepen.io/hatena19/pen/MWyoEpW)
|
|
43
43
|
|
|
44
44
|
FlexBoxで横並びにして、折り返しすると、下記のようになってします。
|
|
45
45
|
■ ■ ■
|
|
@@ -48,4 +48,30 @@
|
|
|
48
48
|
疑似要素て後ろに高さ0の要素を追加することで、
|
|
49
49
|
■ ■ ■
|
|
50
50
|
■ ■
|
|
51
|
-
となります。
|
|
51
|
+
となります。
|
|
52
|
+
|
|
53
|
+
---
|
|
54
|
+
CSS Grid を使うともっとシンプルに記述できます。
|
|
55
|
+
|
|
56
|
+
```css
|
|
57
|
+
.wrapper {
|
|
58
|
+
display: grid;
|
|
59
|
+
grid-template-columns: 100px 100px 100px;
|
|
60
|
+
grid-gap: 0 32px;
|
|
61
|
+
width: 364px;
|
|
62
|
+
box-sizing: border-box;
|
|
63
|
+
border: 1px solid blue;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.hidden {
|
|
67
|
+
display: none;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.wrapper>div {
|
|
71
|
+
width: 100px;
|
|
72
|
+
box-sizing: border-box;
|
|
73
|
+
border: 1px solid red;
|
|
74
|
+
}
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
[CodePenサンプル](https://codepen.io/hatena19/pen/MWyoEpY)
|