適用於UL的2列CSS Flex / Grid

Question

我今天在工作上花了太多時間思考這個問題，所以我想問一下互聯網的蜂巢思想。

我有一個帶有許多<li>元素的標准<ul> （當前為12個，但可能有所不同）。 我想將它們排列成等寬的2列，同時也不要使<ul>跨滿整個塊的寬度。 不幸的是，該解決方案還需要支持IE11（沒有早期版本）。 任何解決方案都需要響應，因此無需設置非百分比寬度。 我已經嘗試了幾種不同的情況（您希望將代碼段擴展為全屏顯示）：

解決方案1（網格）：

 *{ box-sizing: border-box; } div{ display: flex; justify-content: center; } ul{ list-style: none; margin-top: 0; margin-bottom: 0; padding: 0; display: inline-grid; grid-template-columns: repeat(2, 1fr); } li{ padding: 15px; } 

 <div> <ul> <li>In maximus viverra scelerisque. Vestibulum dignissim ex non</li> <li>Sed suscipit, turpis in suscipit consectetur, ante sem.</li> <li>Ut et mauris et dui gravida fringilla ut.</li> <li>Nullam iaculis fermentum sodales. Proin commodo eleifend lacus.</li> <li>Sed molestie, libero at hendrerit sollicitudin, enim nisi.</li> <li>Mauris a facilisis dolor. Sed pharetra hendrerit dolor.</li> <li>Sed vitae felis tellus. Quisque sagittis, felis vitae.</li> <li>Integer et elit metus. Cras congue vestibulum hendrerit.</li> <li>Fusce suscipit ante sed tristique euismod. Duis quis.</li> <li>Vestibulum quam felis, fringilla in justo malesuada, tristique.</li> <li>Integer volutpat quam sed urna iaculis mollis. Maecenas.</li> <li>Nullam dignissim ipsum vitae finibus dignissim. Nam viverra.</li> </ul> </div> 

上面的解決方案基本上可以完美地工作-將<li>排列在兩列中，UL位於包含的flex div的中心。 但是當然IE會有問題，盡管我可以在舊規范中使用IE前綴，但我仍然需要為每個li手動分配列/行位置，而對於可能包含任意數量元素的列表來說，這是不可能的。

解決方案2（flex）：

 *{ box-sizing: border-box; } div { display: flex; justify-content: center; } ul { list-style: none; margin-top: 0; margin-bottom: 0; padding: 0; display: inline-flex; flex-wrap: wrap; } li { padding: 15px; width: 50%; } 

 <div> <ul> <li>In maximus viverra scelerisque. Vestibulum dignissim ex non</li> <li>Sed suscipit, turpis in suscipit consectetur, ante sem.</li> <li>Ut et mauris et dui gravida fringilla ut.</li> <li>Nullam iaculis fermentum sodales. Proin commodo eleifend lacus.</li> <li>Sed molestie, libero at hendrerit sollicitudin, enim nisi.</li> <li>Mauris a facilisis dolor. Sed pharetra hendrerit dolor.</li> <li>Sed vitae felis tellus. Quisque sagittis, felis vitae.</li> <li>Integer et elit metus. Cras congue vestibulum hendrerit.</li> <li>Fusce suscipit ante sed tristique euismod. Duis quis.</li> <li>Vestibulum quam felis, fringilla in justo malesuada, tristique.</li> <li>Integer volutpat quam sed urna iaculis mollis. Maecenas.</li> <li>Nullam dignissim ipsum vitae finibus dignissim. Nam viverra.</li> </ul> </div> 

盡管上述解決方案在技術上是可以接受的（包括IE11在內都可以很好地工作），但是這里的問題是視覺吸引力。 因為<ul>現在跨過整個寬度，盡管位於包含的flex div的中心，所以<li>跨越50％且文本對齊，在每列的右側（寬屏）留有較大的可視空白需要看到額外的空間）。

解決方案3（IE11的表）：

我不會為此發布一個摘要，因為它吸引力最小。 本質上，它涉及專門針對IE11，將<ul>設置為display:table; ，將<li>設置為display:table-cell; float: left; width: 50%; display:table-cell; float: left; width: 50%; ...長話短說，那是一團糟，在視覺上仍然無法正常工作。

我應該減少損失並采用解決方案2嗎？ 如果可能的話，我真的很想獲得解決方案1的視覺布局。

Answer 1

display: flex; 屬性將把元素變成僅影響直接子元素布局的flex容器，因此，如果僅在外部div ，則僅影響直接子元素ul的布局。 因此，我添加了display: flex; 到ul元素，以便包含的子li元素獲得靈活的布局。 有關Flexbox的更多信息的好資源： https ：//css-tricks.com/snippets/css/a-guide-to-flexbox/

為了解決多余的空白，我向ul添加了一個最大寬度，該寬度小於100％，因此寬度不會一直延伸到邊緣，請根據需要調整此值。 我還更改了li元素上的填充，僅更改了左側和右側的填充，並在margin-bottom添加了margin-bottom以垂直放置它們。

最后，我建議您向div包裝器中添加一個類，以便可以根據上下文定位所有內容，否則CSS定位div會影響網站中的每個div ，這可能會造成很大的問題。

 * { box-sizing: border-box; } .wrapper { display: flex; justify-content: center; } .wrapper ul { list-style: none; margin: 0; padding: 0; max-width: 90%; // adjust the width compared to the container display: flex; flex-wrap: wrap; justify-content: center; } .wrapper li { padding: 0 15px; // padding right and left only margin-bottom: 20px; // vertical spacing between li elements width: 50%; } 

 <div class="wrapper"> <ul> <li>In maximus viverra scelerisque. Vestibulum dignissim ex non</li> <li>Sed suscipit, turpis in suscipit consectetur, ante sem.</li> <li>Ut et mauris et dui gravida fringilla ut.</li> <li>Nullam iaculis fermentum sodales. Proin commodo eleifend lacus.</li> <li>Sed molestie, libero at hendrerit sollicitudin, enim nisi.</li> <li>Mauris a facilisis dolor. Sed pharetra hendrerit dolor.</li> <li>Sed vitae felis tellus. Quisque sagittis, felis vitae.</li> <li>Integer et elit metus. Cras congue vestibulum hendrerit.</li> <li>Fusce suscipit ante sed tristique euismod. Duis quis.</li> <li>Vestibulum quam felis, fringilla in justo malesuada, tristique.</li> <li>Integer volutpat quam sed urna iaculis mollis. Maecenas.</li> <li>Nullam dignissim ipsum vitae finibus dignissim. Nam viverra.</li> </ul> </div>