用于UL的2列CSS Flex / Grid

Question

我今天在工作上花了太长时间考虑这个，所以我想我会问互联网蜂巢。

我有一个标准的<ul>与许多<li>元素（目前12但可能会有所不同）。我想将它们排列成两列相等宽度的列，而不是使<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>s排列在2列中，UL以包含flex div为中心。但当然IE有问题，虽然我可以使用IE前缀in the old spec，但我仍然需要为每个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>s用左对齐文本向50％倾斜，在每列的右侧留下大量的视觉白色空间（宽屏需要看到额外的空间） ）。

解决方案3（IE11表）：

我不打算为这个发布一个片段，因为它最不吸引人。基本上它涉及专门针对IE11，将<ul>设置为display:table;，将<li>s设置为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以垂直放置它们。

最后，我建议你在你的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>