如何在flex项目及其容器周围创建"折叠"边框？

Question

我有以下布局:

#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,但正因为如此,元素之间的边界加倍.我正在寻找一种方法,使边框在元素之间的宽度相同,同时border-collapse使用flexbox 保持外部边框相同(类似于在桌子上工作的方式).这是可能的,如果是的话,怎么样？

Answer 1

有两种主要方法可以实现这一目标.在每种方法下,您都可以找到一个可以扩展的工作演示,以了解它的行为方式.将鼠标悬停在元素上将为其提供红色边框,以便更轻松地选择最适合您的方法.

亲子边界对齐

您需要像这样定义边框:

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)一起使用,因为您可能遇到问题.

当使用border-color-changing规则时,半宽将是明显的,但如果你想要更好看的边框,这是一个比第一个更好的方法.

: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>

Answer 2

就我而言，边框需要为 1px，这使得它变得更加困难。我在https://codepen.io/Hawkun/pen/rsIEp/找到了一个解决方案，它使用阴影来模拟边框，实际上效果很好。

这是正在运行的代码。它不使用 flexbox，但如果你将阴影应用到你的 flex 内容上，你就可以开始了。

body {
  font-family: sans-serif;
  background-color: #eee;
  padding: 20px;
}

.info {
  color: darkred;
  font-weight: bolder;
}

.container {
  background-color: white;
  float: left; /* Makes the container height the same as its children. */
  padding: 10px;
  margin-bottom: 40px;
}

.container div {
  padding: 20px;
  float: left;
  background-color: #def;
  
  
  /* And here comed the trick: */

  box-shadow: 
1px 0 0 0 #888, 
0 1px 0 0 #888, 
1px 1px 0 0 #888,   /* Just to fix the corner */
1px 0 0 0 #888 inset, 
0 1px 0 0 #888 inset;

}

#container1 {
  width: 100%;
}

#container2 {
  width: 50%;
}

#container2 div {
  width: 70%;
}

<p>The first container:</p>

<div id="container1" class="container">
  <div>Hello, this is the first floated div</div>
  <div>And this is the second</div>
  <div>And finally the third one</div>
</div>

<p>The second container:</p>

<div id="container2" class="container">
  <div>Hello, this is the first floated div</div>
  <div>And this is the second</div>
  <div>And finally the third one</div>
</div>

Answer 3

我有同样的问题，但我提出了这个问题（请参见下面的演示）。我在每个块中添加等于边框宽度的负“ margin-left”和负“ margin-top”。然后，我向容器添加相同但正的'padding-left'和'padding-top'，以补偿偏移量。呜啦！现在，我们得到了弹性项目及其容器周围的“折叠”边框。

.catalog-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding-top: 1px;
  padding-left: 1px;
  box-sizing: border-box;
  max-width: 800px;
  margin: auto;
  box-shadow: inset 0 0 0 1px #8c8c8c;
}

.catalog-item {
  width: calc(25% + 1px);
  margin-top: -1px;
  margin-left: -1px;
  padding: 20px;
  border: 1px solid #8c8c8c;
  box-sizing: border-box;
  transition: all 0.2s;
  box-sizing: border-box;
}

.catalog-item:hover {
  border-color: transparent;
  box-shadow: 0 0 15px -2px #8c8c8c;
}

<div class="catalog-list">
  <div class="catalog-item"></div>
  <div class="catalog-item"></div>
  <div class="catalog-item"></div>
  <div class="catalog-item"></div>
  <div class="catalog-item"></div>
  <div class="catalog-item"></div>
</div>