回答編集履歴
2
書式の改善
answer
CHANGED
|
@@ -20,9 +20,18 @@
|
|
|
20
20
|
追記：
|
|
21
21
|
試しに、質問文に掲載頂いたものを、min-width ではなくmax-widthを使用して、
|
|
22
22
|
通常599以下なら a に18%を設定しておいて、@mediaで600以上なら3段に、というふうに入れ替えしてみました。
|
|
23
|
-
|
|
23
|
+
```
|
|
24
|
-
|
|
24
|
+
.flexbox2 { /*省略*/ }
|
|
25
|
+
.flexbox2 a {
|
|
26
|
+
flex: 0 0 18%;
|
|
27
|
+
}
|
|
25
|
-
|
|
28
|
+
@media screen and (max-width: 599px) {
|
|
26
|
-
|
|
29
|
+
.flexbox2 a:first-of-type {
|
|
30
|
+
flex: 0 0 100%;
|
|
31
|
+
}
|
|
27
|
-
|
|
32
|
+
.flexbox2 a:nth-of-type(n+2) {
|
|
33
|
+
flex: 0 0 48%;
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
```
|
|
28
37
|
としてみたところ`.flexbox2 a`の指定のままでもご希望の動作をしているようです。
|
1
回答に追記しました。
answer
CHANGED
|
@@ -14,4 +14,15 @@
|
|
|
14
14
|
}
|
|
15
15
|
}
|
|
16
16
|
```
|
|
17
|
-
ちなみに`min-width:599px`だと598pxまでが3段、599pxから1段になっちゃいますね。
|
|
17
|
+
ちなみに`min-width:599px`だと598pxまでが3段、599pxから1段になっちゃいますね。
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
追記：
|
|
21
|
+
試しに、質問文に掲載頂いたものを、min-width ではなくmax-widthを使用して、
|
|
22
|
+
通常599以下なら a に18%を設定しておいて、@mediaで600以上なら3段に、というふうに入れ替えしてみました。
|
|
23
|
+
|
|
24
|
+
通常（599px以下）に `.flexbox2 a { flex: 0 0 18%; }`
|
|
25
|
+
`@media screen and (max-width: 599px)` に
|
|
26
|
+
` .flexbox2 a:first-of-type { flex: 0 0 100%; }`
|
|
27
|
+
` .flexbox2 a:nth-of-type(n+2) { flex: 0 0 48%; }`
|
|
28
|
+
としてみたところ`.flexbox2 a`の指定のままでもご希望の動作をしているようです。
|