回答編集履歴
1
書式の改善
answer
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
> [align-items - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/align-items)
|
|
2
|
-
CSS の align-items プロパティは、すべての直接の子要素に集合として align-self の値を設定します。フレックスボックスでは交差軸方向のアイテムの配置を制御します
|
|
2
|
+
CSS の align-items プロパティは、すべての直接の子要素に集合として align-self の値を設定します。フレックスボックスでは**交差軸方向**のアイテムの配置を制御します
|
|
3
3
|
|
|
4
4
|
上記に説明されている通りですが、ちょっと分かりにくいですね。
|
|
5
|
-
align-items は、子要素を交差軸方向の配置を制御するものです。
|
|
5
|
+
align-items は、子要素**を交差軸方向**の配置を制御するものです。
|
|
6
|
-
交差軸方向とは、flex-direction で指定した並べる方向（主軸）と交差する方向ということです。
|
|
6
|
+
**交差軸方**向とは、flex-direction で指定した並べる方向（**主軸**）と交差する方向ということです。
|
|
7
7
|
flex-direction: row で水平方向で並べたら、align-itemsは垂直方向の配置を制御します。
|
|
8
8
|
flex-direction: column で垂直方向で並べたら、align-itemsは水平方向の配置を制御します。
|
|
9
9
|
今回は flex-direction: column を設定してますので、水平方向の配置を制御することになります。
|
|
@@ -17,4 +17,9 @@
|
|
|
17
17
|
flex-direction: row;
|
|
18
18
|
justify-content: center;
|
|
19
19
|
```
|
|
20
|
-
justify-content は主軸方向の配置を制御します。
|
|
20
|
+
justify-content は主軸方向の配置を制御します。今回は、子要素は一つだけですので、どちらも同じことになります。
|
|
21
|
+
|
|
22
|
+
まあ、中央寄せだけが目的なら、自分なら、子要素に下記の設定にします。
|
|
23
|
+
```css
|
|
24
|
+
margin: 0 auto;
|
|
25
|
+
```
|