回答編集履歴
2
書式の改善
test
CHANGED
|
@@ -42,14 +42,32 @@
|
|
|
42
42
|
|
|
43
43
|
通常599以下なら a に18%を設定しておいて、@mediaで600以上なら3段に、というふうに入れ替えしてみました。
|
|
44
44
|
|
|
45
|
+
```
|
|
45
46
|
|
|
47
|
+
.flexbox2 { /*省略*/ }
|
|
46
48
|
|
|
47
|
-
|
|
49
|
+
.flexbox2 a {
|
|
48
50
|
|
|
49
|
-
|
|
51
|
+
flex: 0 0 18%;
|
|
50
52
|
|
|
51
|
-
|
|
53
|
+
}
|
|
52
54
|
|
|
55
|
+
@media screen and (max-width: 599px) {
|
|
56
|
+
|
|
57
|
+
.flexbox2 a:first-of-type {
|
|
58
|
+
|
|
59
|
+
flex: 0 0 100%;
|
|
60
|
+
|
|
61
|
+
}
|
|
62
|
+
|
|
53
|
-
|
|
63
|
+
.flexbox2 a:nth-of-type(n+2) {
|
|
64
|
+
|
|
65
|
+
flex: 0 0 48%;
|
|
66
|
+
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
```
|
|
54
72
|
|
|
55
73
|
としてみたところ`.flexbox2 a`の指定のままでもご希望の動作をしているようです。
|
1
回答に追記しました。
test
CHANGED
|
@@ -31,3 +31,25 @@
|
|
|
31
31
|
```
|
|
32
32
|
|
|
33
33
|
ちなみに`min-width:599px`だと598pxまでが3段、599pxから1段になっちゃいますね。
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
追記：
|
|
40
|
+
|
|
41
|
+
試しに、質問文に掲載頂いたものを、min-width ではなくmax-widthを使用して、
|
|
42
|
+
|
|
43
|
+
通常599以下なら a に18%を設定しておいて、@mediaで600以上なら3段に、というふうに入れ替えしてみました。
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
|
|
47
|
+
通常（599px以下）に `.flexbox2 a { flex: 0 0 18%; }`
|
|
48
|
+
|
|
49
|
+
`@media screen and (max-width: 599px)` に
|
|
50
|
+
|
|
51
|
+
` .flexbox2 a:first-of-type { flex: 0 0 100%; }`
|
|
52
|
+
|
|
53
|
+
` .flexbox2 a:nth-of-type(n+2) { flex: 0 0 48%; }`
|
|
54
|
+
|
|
55
|
+
としてみたところ`.flexbox2 a`の指定のままでもご希望の動作をしているようです。
|