使用 align-items 居中所有內容但不左對齊

Question

感謝您閱讀帖子。 我對 Flexbox 有一個奇怪的問題。 我有一個 div 容器，其中一些 div 需要連續顯示 3 個項目，屏幕尺寸小於 992 的 2 個項目和小於 568 的 1 個項目。

為了實現這一點，我使用了display: flex和flex-wrap: wrap到容器和flex: 1 0 26%到內部 div。 它似乎工作正常，但問題在於 div 的內部內容。 它們都是左對齊的。

然后我使用display: flex ， flex-direction: column和align-items: center到內部容器，但是所有內部內容都居中但不是左對齊。

這是問題：

這是我一直在努力實現的目標：

這是片段：

 #topic-list { display: flex; flex-wrap: wrap; } #topic-list div.list-wrapper { flex: 1 0 26%; margin: 10px; border: 1px solid #ccc; padding: 10px; display: flex; flex-direction: column; align-items: center; }

 <div id="topic-list"> <div class="list-wrapper"> <div class="el">A</div> <div> <a href="#">Apple</a> </div> </div> <div class="list-wrapper"> <div class="el">B</div> <div> <a href="#">Ball</a> </div> </div> <div class="list-wrapper"> <div class="el">F</div> <div> <a href="#">Fan</a> </div> <div> <a href="#">Fanta</a> </div> <div> <a href="#">Follow</a> </div> </div> <div class="list-wrapper"> <div class="el">I</div> <div> <a href="#">Inspire</a> </div> </div> <div class="list-wrapper"> <div class="el">L</div> <div> <a href="#">Love</a> </div> </div> <div class="list-wrapper"> <div class="el">M</div> <div> <a href="#">Mad</a> </div> <div> <a href="#">Money</a> </div> <div> <a href="#">Mother</a> </div> </div> <div class="list-wrapper"> <div class="el">S</div> <div> <a href="#">Sad</a> </div> <div> <a href="#">Son</a> </div> <div> <a href="#">Sick</a> </div> </div> <div class="list-wrapper"> <div class="el">T</div> <div> <a href="#">Tea</a> </div> <div> <a href="#">Total</a> </div> </div> <div class="list-wrapper"> <div class="el">W</div> <div> <a href="#">Wrap</a> </div> </div> </div>

Answer 1

您可以在列表包裝器中再添加一個 div 並使其文本左對齊。

 #topic-list { display: flex; flex-wrap: wrap; } #topic-list div.list-wrapper { flex: 1 0 26%; margin: 10px; border: 1px solid #ccc; padding: 10px; display: flex; flex-direction: column; align-items: center; }.test { text-align: left; }

 <div id="topic-list"> <div class="list-wrapper"> <div class='test'> <div class="el">A</div> <div> <a href="#">Apple</a> </div> </div> </div> <div class="list-wrapper"> <div class='test'> <div class="el">B</div> <div> <a href="#">Ball</a> </div> </div> </div> <div class="list-wrapper"> <div class='test'> <div class="el">F</div> <div> <a href="#">Fan</a> </div> <div> <a href="#">Fanta</a> </div> <div> <a href="#">Follow</a> </div> </div> </div> <div class="list-wrapper"> <div class='test'> <div class="el">I</div> <div> <a href="#">Inspire</a> </div> </div> </div> <div class="list-wrapper"> <div class='test'> <div class="el">L</div> <div> <a href="#">Love</a> </div> </div> </div> <div class="list-wrapper"> <div class='test'> <div class="el">M</div> <div> <a href="#">Mad</a> </div> <div> <a href="#">Money</a> </div> <div> <a href="#">Mother</a> </div> </div> </div> <div class="list-wrapper"> <div class='test'> <div class="el">S</div> <div> <a href="#">Sad</a> </div> <div> <a href="#">Son</a> </div> <div> <a href="#">Sick</a> </div> </div> </div> <div class="list-wrapper"> <div class='test'> <div class="el">T</div> <div> <a href="#">Tea</a> </div> <div> <a href="#">Total</a> </div> </div> </div> <div class="list-wrapper"> <div class='test'> <div class="el">W</div> <div> <a href="#">Wrap</a> </div> </div> </div> </div>