css - 如何在 flex 元素及其容器周围创建 “collapsed”边框？

我有以下布局:

#limited-width {
  width: 100%;
  max-width: 200px;
  margin: 0 auto;
  font-size: 18px;
}
ul {
  display: flex;
  flex-flow: row wrap;
  list-style: none;
  padding: 0;
  margin: 20px;
}
ul > li {
  display: block;
  text-align: center;
  flex: 1 0 auto;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 4px 7px;
  border: 2px solid rgba(0,0,0,.3);
  background-color: rgba(0,0,0,.03);
}

<div id="limited-width">
  <ul>
    <li>Apple</li>
    <li>Orange</li>
    <li>Pineapple</li>
    <li>Banana</li>
    <li>Tomato</li>
    <li>Pear</li>
    <li>Lemon</li>
  </ul>
</div>

如您所见，ul内的列表项的边框为2px的宽度，因此，元素之间的边框加倍。我正在寻找一种使用flexbox使元素之间的边框宽度相同，同时还要使外部边框相同(类似于border-collapse在表上的工作方式)的方法。这可能吗？如果可以，怎么办？

最佳答案

有两种主要方法可以实现此目的。在每种方法下，您都可以找到一个有效的演示，可以对其进行扩展以查看其行为。将鼠标悬停在元素上将使它们带有红色边框，从而使选择最适合您的方法更加容易。

亲子边界对齐

您需要像这样定义边框:

ul, ul > li {
  border-style: solid;
  border-color: rgba(0,0,0,.3);
}
ul      { border-width: 2px  0   0  2px }
ul > li { border-width:  0  2px 2px  0  }

此处的密钥位于border-width属性中:

在容器上，top和left的值设置为所需的大小，而right和bottom设置为0

在项目上，right和bottom的值设置为所需的大小，而top和left的值设置为0

这样，边框将以某种方式加在一起，从而在元素和容器周围形成一个很好折叠的一致边框。

:hover { border-color: red }
#limited-width {
  width: 100%;
  max-width: 200px;
  margin: 0 auto;
  font-size: 18px;
}
ul, ul > li {
  border-style: solid;
  border-color: rgba(0,0,0,.3);
}
ul {
  display: flex;
  flex-flow: row wrap;
  list-style: none;
  padding: 0;
  margin: 20px;
  border-width: 2px 0 0 2px;
}
ul > li {
  display: block;
  text-align: center;
  flex: 1 0 auto;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 4px 7px;
  border-width: 0 2px 2px 0;
  background-color: rgba(0,0,0,.03);
}

<div id="limited-width">
  <ul>
    <li>Apple</li>
    <li>Orange</li>
    <li>Pineapple</li>
    <li>Banana</li>
    <li>Tomato</li>
    <li>Pear</li>
    <li>Lemon</li>
  </ul>
</div>

边框减半

如果出于任何目的希望每个元素都有不同的边框，这是一个折衷方案，可能会满足您的需求。给定所需的border-width的2px，CSS如下:

ul, ul > li {
  border: 1px solid rgba(0,0,0,.3);
}

此方法在父代及其子代上设置所需边框宽度的一半，从而使最终边框2px变粗。请谨慎使用此方法，并将其与小数像素(例如1.5px)一起使用run into issues。

当使用border-color更改规则时，半角将很明显，但是如果您希望边框看起来更好，则这是比第一种更好的方法。

:hover { border-color: red }
#limited-width {
  width: 100%;
  max-width: 200px;
  margin: 0 auto;
  font-size: 18px;
}
ul, ul > li {
  border: 1px solid rgba(0,0,0,.3);
}
ul {
  display: flex;
  flex-flow: row wrap;
  list-style: none;
  padding: 0;
  margin: 20px;
}
ul > li {
  display: block;
  text-align: center;
  flex: 1 0 auto;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 4px 7px;
  background-color: rgba(0,0,0,.03);
}

<div id="limited-width">
  <ul>
    <li>Apple</li>
    <li>Orange</li>
    <li>Pineapple</li>
    <li>Banana</li>
    <li>Tomato</li>
    <li>Pear</li>
    <li>Lemon</li>
  </ul>
</div>

关于css - 如何在 flex 元素及其容器周围创建 “collapsed”边框？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35678353/