用于 UL 的 2 列 CSS Flex/Grid

Question

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

我有一个标准的 <ul> 和许多 <li> 元素（目前有 12 个，但可能会有所不同）。我想将它们排列成 2 列等宽，同时也不使 <ul> 跨度全块宽度。不幸的是，该解决方案还需要支持 IE11（不更早）。任何解决方案也需要响应，因此没有设置非百分比宽度。我尝试了几种不同的场景（您需要将 sn-p 扩展到全屏）：

解决方案 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（弹性）：

*{
    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 的表格）：

我不会费心为这个发布一个 sn-p，因为它是最不吸引人的。从本质上讲，它涉及专门针对 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>