回答編集履歴
2
説明の改善
answer
CHANGED
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
|
|
11
11
|
つまり、親要素の中で子要素の垂直位置をどのように配置するかを指定するものです。
|
|
12
12
|
|
|
13
|
-
親要素にheightの指定していないと、親要素の高さには子要素の高さと同じなりますので、子要素の垂直位置はどれを指定しても同じになります。
|
|
13
|
+
親要素にheightの指定していないと、親要素の高さには子要素の高さと同じなりますので、子要素の垂直位置はどれを指定しても同じになります。(親要素に空きスペースがないので)
|
|
14
14
|
|
|
15
15
|
親要素に適当なheight を設定すれば反映されているのが確認できます。
|
|
16
16
|
|
1
説明の改善
answer
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
|
-
align-itemsとalign-content
|
|
1
|
+
> align-itemsとalign-contentが効かずに困っています。原因はなんでしょうか？
|
|
2
2
|
|
|
3
|
+
align-itemsとalign-content は[参考リンク先](https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet)の説明は下記のようになっています。
|
|
4
|
+
|
|
3
5
|
> align-items … 垂直方向の揃え
|
|
4
6
|
親要素に空きスペースがあった場合、子要素を垂直方向のどの位置に配置するかを指定します。
|
|
5
7
|
|
|
@@ -32,4 +34,8 @@
|
|
|
32
34
|
flex-wrap:wrap;
|
|
33
35
|
align-content: center;
|
|
34
36
|
}
|
|
35
|
-
```
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
> 親要素にflex-direction: column;を追加すると水平方向が揃いました。（ページの中心で縦に1，2，3，4，5…と並ぶ）ただ解説では横方向に並ぶはずなのですが、うまくいきません。
|
|
40
|
+
|
|
41
|
+
`flex-direction: column;` はリンク先の解説では「子要素を上から下に配置」とあります。つまり、縦に並びます。横方向に並べたいななら、`flex-direction: row;` です。あるいは、flex-direction の指定を省略しても初期値は row なので、横並びになります。
|