回答編集履歴
2
別案追記
answer
CHANGED
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
|
|
19
19
|
```css
|
|
20
20
|
body {
|
|
21
|
-
max-width:
|
|
21
|
+
max-width: 1056px;
|
|
22
22
|
margin: 0 auto;
|
|
23
23
|
}
|
|
24
24
|
.float {
|
|
@@ -59,4 +59,36 @@
|
|
|
59
59
|
white-space: nowrap;
|
|
60
60
|
}
|
|
61
61
|
```
|
|
62
|
-
[動作確認用サンプル](https://codepen.io/hatena19/pen/WNbOxQK)
|
|
62
|
+
[動作確認用サンプル](https://codepen.io/hatena19/pen/WNbOxQK)
|
|
63
|
+
|
|
64
|
+
### 別案 CSS Grid を使うとシンプルに記述できる
|
|
65
|
+
|
|
66
|
+
Flexboxだと折り返しアイテムの左寄せに疑似要素を使う必要があるが、
|
|
67
|
+
CSS Grid だと `auto-fill`で簡単に左寄せ出来ます。
|
|
68
|
+
|
|
69
|
+
```css
|
|
70
|
+
body {
|
|
71
|
+
max-width: 1036px;
|
|
72
|
+
margin: 0 auto;
|
|
73
|
+
}
|
|
74
|
+
.float {
|
|
75
|
+
display: grid;
|
|
76
|
+
grid-template-columns: repeat(auto-fill, 332px);
|
|
77
|
+
justify-content: center;
|
|
78
|
+
grid-row-gap: 20px;
|
|
79
|
+
grid-column-gap: 20px;
|
|
80
|
+
}
|
|
81
|
+
.item {
|
|
82
|
+
background: #ddd;
|
|
83
|
+
padding: 1em;
|
|
84
|
+
}
|
|
85
|
+
.image {
|
|
86
|
+
width: 100%;
|
|
87
|
+
}
|
|
88
|
+
p {
|
|
89
|
+
overflow: hidden;
|
|
90
|
+
text-overflow: ellipsis;
|
|
91
|
+
white-space: nowrap;
|
|
92
|
+
}
|
|
93
|
+
```
|
|
94
|
+
[動作確認用サンプル](https://codepen.io/hatena19/pen/ExaXymV)
|
1
サンプルリンク追加
answer
CHANGED
|
@@ -58,4 +58,5 @@
|
|
|
58
58
|
text-overflow: ellipsis;
|
|
59
59
|
white-space: nowrap;
|
|
60
60
|
}
|
|
61
|
-
```
|
|
61
|
+
```
|
|
62
|
+
[動作確認用サンプル](https://codepen.io/hatena19/pen/WNbOxQK)
|