回答編集履歴
6
日本語の修正
test
CHANGED
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
flex-direction: column;
|
|
12
12
|
}
|
|
13
13
|
```
|
|
14
|
-
|
|
14
|
+
or
|
|
15
15
|
```css
|
|
16
16
|
.service2 {
|
|
17
17
|
flex-direction: column !important;
|
5
分かりやすい文章に変更
test
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
http://creator.aainc.co.jp/archives/4947
|
|
6
6
|
|
|
7
7
|
**解決策**
|
|
8
|
-
以下のコード
|
|
8
|
+
以下のコードどちらかをメディアクエリ内に追加してみてください。
|
|
9
9
|
```css
|
|
10
10
|
.Service-box li:nth-child(even) {
|
|
11
11
|
flex-direction: column;
|
4
説明を追加
test
CHANGED
|
@@ -1,3 +1,10 @@
|
|
|
1
|
+
**原因**
|
|
2
|
+
cssの優先順位が原因のようですね。
|
|
3
|
+
詳しくは下記のurlの記事等を参考にしてみてください。
|
|
4
|
+
https://zero.css-happylife.com/basic/specificity.shtml
|
|
5
|
+
http://creator.aainc.co.jp/archives/4947
|
|
6
|
+
|
|
7
|
+
**解決策**
|
|
1
8
|
以下のコードのようにしてみてください。
|
|
2
9
|
```css
|
|
3
10
|
.Service-box li:nth-child(even) {
|
3
コードを追加
test
CHANGED
|
@@ -4,4 +4,9 @@
|
|
|
4
4
|
flex-direction: column;
|
|
5
5
|
}
|
|
6
6
|
```
|
|
7
|
-
|
|
7
|
+
もしくは下記のコードにする事で、したい挙動に出来ると思います。
|
|
8
|
+
```css
|
|
9
|
+
.service2 {
|
|
10
|
+
flex-direction: column !important;
|
|
11
|
+
}
|
|
12
|
+
```
|
2
コードを変更
test
CHANGED
|
@@ -1,15 +1,7 @@
|
|
|
1
1
|
以下のコードのようにしてみてください。
|
|
2
2
|
```css
|
|
3
|
-
.service2{
|
|
4
|
-
display: block;
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
↓
|
|
8
|
-
|
|
9
|
-
.
|
|
3
|
+
.Service-box li:nth-child(even) {
|
|
10
|
-
display: flex;
|
|
11
|
-
|
|
4
|
+
flex-direction: column;
|
|
12
|
-
background-color: red;
|
|
13
5
|
}
|
|
14
6
|
```
|
|
15
7
|
このコードの結果を教えてください。
|
1
文章を追加
test
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
以下のコードのようにしてみてください。
|
|
1
2
|
```css
|
|
2
3
|
.service2{
|
|
3
4
|
display: block;
|
|
@@ -6,7 +7,9 @@
|
|
|
6
7
|
↓
|
|
7
8
|
|
|
8
9
|
.service2 {
|
|
10
|
+
display: flex;
|
|
9
11
|
flex-direction: column;
|
|
10
12
|
background-color: red;
|
|
11
13
|
}
|
|
12
14
|
```
|
|
15
|
+
このコードの結果を教えてください。
|