回答編集履歴
3
書式改善
test
CHANGED
|
@@ -37,9 +37,9 @@
|
|
|
37
37
|
---
|
|
38
38
|
|
|
39
39
|
> 画面幅を変更する際にこのようにレイアウトがジグザグになってしまうのですが、
|
|
40
|
-
こちらはなおりますでしょうか？（1枚目・2枚目）
|
|
40
|
+
> こちらはなおりますでしょうか？（1枚目・2枚目）
|
|
41
41
|
|
|
42
|
-
`align-items: center;` を `align-items: stretch;
|
|
42
|
+
`align-items: center;` を `align-items: stretch;`に修正してください。
|
|
43
43
|
アイテムの高さが、同じ行の高さが最大のものに合わせられます。
|
|
44
44
|
|
|
45
45
|
```css
|
2
書式の改善
test
CHANGED
|
@@ -33,8 +33,9 @@
|
|
|
33
33
|
|
|
34
34
|
`.item`というセレクタに対応するクラスは存在しない。`.card`の間違いでしょう。
|
|
35
35
|
|
|
36
|
+
追記
|
|
37
|
+
---
|
|
36
38
|
|
|
37
|
-
---追記
|
|
38
39
|
> 画面幅を変更する際にこのようにレイアウトがジグザグになってしまうのですが、
|
|
39
40
|
こちらはなおりますでしょうか？（1枚目・2枚目）
|
|
40
41
|
|
1
追記
test
CHANGED
|
@@ -32,3 +32,21 @@
|
|
|
32
32
|
`flex-wrap: nowrap;` を `flex-wrap: wrap;` で上書きして折り返しできるようにする。
|
|
33
33
|
|
|
34
34
|
`.item`というセレクタに対応するクラスは存在しない。`.card`の間違いでしょう。
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
---追記
|
|
38
|
+
> 画面幅を変更する際にこのようにレイアウトがジグザグになってしまうのですが、
|
|
39
|
+
こちらはなおりますでしょうか？（1枚目・2枚目）
|
|
40
|
+
|
|
41
|
+
`align-items: center;` を `align-items: stretch;‘ に修正してください。
|
|
42
|
+
アイテムの高さが、同じ行の高さが最大のものに合わせられます。
|
|
43
|
+
|
|
44
|
+
```css
|
|
45
|
+
.cardlayout-wrap {
|
|
46
|
+
display: flex;
|
|
47
|
+
background: rgba(255, 255, 255, 0.6);
|
|
48
|
+
flex-wrap: nowrap;
|
|
49
|
+
justify-content: center;
|
|
50
|
+
align-items: stretch; /* 修正 */
|
|
51
|
+
}
|
|
52
|
+
```
|