Flexboxのalign-itemsとalign-contentが反映されない

前提・実現したいこと

下記のページのコードを実際に書いてみたのですが、align-itemsとalign-contentが効かずに困っています。原因はなんでしょうか？

https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet

最終的には、align-itemsとalign-contentの各値が反映されたレイアウト（リンク先の画像の各レイアウト）にしたいです。

発生している問題・エラーメッセージ

align-itemsとalign-contentが反映されない

該当のソースコード

■HTML

<body>
   <div class="container">
     <div class="item">Item 1</div>
     <div class="item">Item 2</div>
     <div class="item">Item 3</div>
     <div class="item">Item 4</div>
     <div class="item">Item 5</div>
     <div class="item">Item 6</div>
     <div class="item">Item 7</div>
     <div class="item">Item 8</div>
   </div>

 </body>

■CSS

.item {
    width: 100px;
    height: 100px;
    font-size:200%;
    margin: 5px 10px 10px 5px;
    padding: 5px;
    background-color: #ff11ff;
}

.container {
    display: flex;
    flex-wrap:wrap;
    align-content: center;
}

試したこと

親要素にflex-direction: column;を追加すると水平方向が揃いました。（ページの中心で縦に1，2，3，4，5…と並ぶ）ただ解説では横方向に並ぶはずなのですが、うまくいきません。

yambejp

2020/06/06 07:15

表示したいHTMLは？

hatena19

2020/06/06 07:50

現状のHTMLを提示してください。最終的にどのようなレイアウトにしたいのか、説明してください。

kei344

2020/06/06 08:26

（質問文は編集できます）質問文のHTML/CSSはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

行動規範の内容に同意します

回答1件

ベストアンサー

align-itemsとalign-contentが効かずに困っています。原因はなんでしょうか？

align-itemsとalign-content は参考リンク先の説明は下記のようになっています。

align-items … 垂直方向の揃え

親要素に空きスペースがあった場合、子要素を垂直方向のどの位置に配置するかを指定します。

align-content … 複数行にした時の揃え

子要素が複数行に渡った場合の垂直方向の揃えを指定します。

つまり、親要素の中で子要素の垂直位置をどのように配置するかを指定するものです。

親要素にheightの指定していないと、親要素の高さには子要素の高さと同じなりますので、子要素の垂直位置はどれを指定しても同じになります。(親要素に空きスペースがないので)

親要素に適当なheight を設定すれば反映されているのが確認できます。

例えば下記のCSSで確認してみてください。
アイテムは親要素の上下中央位置に表示されます。

css
1.item {
2  width: 100px;
3  height: 100px;
4  font-size:200%;
5  margin: 5px 10px 10px 5px;
6  padding: 5px;
7  background-color: #ff11ff;
8}
9
10.container {
11  background-color: lightgray; /* 親要素のサイズが分かり安いよう背景色設定 */
12  min-height: 500px; /* 最小高さを設定 */
13  display: flex;
14  flex-wrap:wrap;
15  align-content: center;
16}

親要素にflex-direction: column;を追加すると水平方向が揃いました。（ページの中心で縦に1，2，3，4，5…と並ぶ）ただ解説では横方向に並ぶはずなのですが、うまくいきません。

flex-direction: column; はリンク先の解説では「子要素を上から下に配置」とあります。つまり、縦に並びます。横方向に並べたいななら、flex-direction: row; です。あるいは、flex-direction の指定を省略しても初期値は row なので、横並びになります。

投稿2020/06/06 08:58

編集2020/06/06 09:06

hatena19

総合スコア33782