前提・実現したいこと
下記のページのコードを実際に書いてみたのですが、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…と並ぶ)ただ解説では横方向に並ぶはずなのですが、うまくいきません。
回答1件
あなたの回答
tips
プレビュー