html - 适用于UL的2列CSS Flex/Grid

我今天在工作上花了太多时间思考这个问题，所以我想问一下互联网的蜂巢思想。

我有一个带有许多<ul>元素的标准<li>（当前为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前缀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>跨越50％且文本左对齐，在每列的右侧（宽屏）留有较大的可视空白需要看到额外的空间）。

解决方案3（IE11的表）：

我不会为此发布一个摘要，因为它吸引力最小。本质上，它涉及专门针对IE11，将<ul>设置为display:table;，将<li>设置为display:table-cell; float: left; width: 50%; ...长话短说，这是一团糟，在视觉上仍然无法正常工作。

我应该减少损失并采用解决方案2吗？如果可能的话，我真的很想获得解决方案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>

关于html - 适用于UL的2列CSS Flex/Grid，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55192082/