如何创建“折叠"弹性项目及其容器周围的边框? [英] How to create "collapsed" borders around flex items and their container?

问题描述

我有以下布局:

#limited-width {宽度:100%；最大宽度:200px；边距:0 自动；字体大小:18px；}ul{显示:弹性；flex-flow:行包装；列表样式:无；填充:0；边距:20px；}升 >李{显示:块；文本对齐:居中；弹性:1 0 自动；最大宽度:100%；box-sizing: 边框框；边距:0；填充:4px 7px；边框:2px 实心 rgba(0,0,0,.3)；背景颜色:rgba(0,0,0,.03);}

<ul><li>苹果</li><li>橙色</li><li>菠萝</li><li>香蕉</li><li>番茄</li><li>梨</li><li>柠檬</li>

如您所见，ul 中的列表项有一个宽度为 2px 的边框，但因此，元素之间的边框加倍了.我正在寻找一种使用 flexbox 使元素之间的边框宽度相同的方法，同时还保持外部边框相同(类似于 border-collapse 在表格上的工作方式).这可能吗，如果可以，怎么做?

解决方案

有两种主要方法可以实现这一点.在每种方法下，您都会找到一个工作演示，您可以展开该演示以查看其行为方式.将鼠标悬停在元素上会给它们一个红色边框，以便您更轻松地选择最适合您的方法.

父子边框对齐

你需要像这样定义边框:

ul, ul >李{边框样式:实心；边框颜色:rgba(0,0,0,.3);}ul { 边框宽度:2px 0 0 2px }升 >li { 边框宽度:0 2px 2px 0 }

这里的关键是在 border-width 属性中:

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

通过这样做，边框将以某种方式加起来，在元素和容器周围形成一个很好的折叠的、一致的边框.

:hover { border-color: red }#limited-width {宽度:100%；最大宽度:200px；边距:0 自动；字体大小:18px；}ul, ul >李{边框样式:实心；边框颜色:rgba(0,0,0,.3);}ul{显示:弹性；flex-flow:行包装；列表样式:无；填充:0；边距:20px；边框宽度:2px 0 0 2px；}升 >李{显示:块；文本对齐:居中；弹性:1 0 自动；最大宽度:100%；box-sizing: 边框框；边距:0；填充:4px 7px；边框宽度:0 2px 2px 0；背景颜色:rgba(0,0,0,.03);}

<ul><li>苹果</li><li>橙色</li><li>菠萝</li><li>香蕉</li><li>番茄</li><li>梨</li><li>柠檬</li>

将边界减半

如果您想出于任何目的为每个元素设置不同的边框，这是一种可能适合您需求的折衷方案.给定 2px 所需的 border-width，CSS 如下:

ul, ul >李{边框:1px 实心 rgba(0,0,0,.3)；}

此方法在父级及其子级上设置所需边框宽度的一半，使最终边框 2px 变厚.谨慎使用带有分数像素(例如 1.5px)的这种方法，因为您可能遇到问题.

当使用 border-color 改变规则时，半角会很明显，但如果你想要更好看的边框，这是比第一种更好的方法.

:hover { border-color: red }#limited-width {宽度:100%；最大宽度:200px；边距:0 自动；字体大小:18px；}ul, ul >李{边框:1px 实心 rgba(0,0,0,.3)；}ul{显示:弹性；flex-flow:行包装；列表样式:无；填充:0；边距:20px；}升 >李{显示:块；文本对齐:居中；弹性:1 0 自动；最大宽度:100%；box-sizing: 边框框；边距:0；填充:4px 7px；背景颜色:rgba(0,0,0,.03);}

<ul><li>苹果</li><li>橙色</li><li>菠萝</li><li>香蕉</li><li>番茄</li><li>梨</li><li>柠檬</li>

I have the following layout:

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

As you can see, the list items inside the ul have a border with the width of 2px, but because of this, the border between elements doubles. I'm looking for a way to make the borders the same width between elements, while also keeping the border on the outside the same (similar to how border-collapse works on tables) using flexbox. Is this possible, and if so, how?

解决方案

There are two primary ways to achieve this. Under each method you will find a working demo that you can expand to see how it behaves. Hovering over elements will give them a red border to make choosing the approach that works best for you easier.

Parent-child border alignment

You need to define the border like this:

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  }

The key here is in the border-width property:

• On the container, the values for the top and left are set to the desired size while the right and bottom are set to 0
• On the items, the values for the right and bottom are set to the desired size while the top and left are set to 0

By doing this, the borders will add up in a way that they form a nicely collapsed, consistent border around the elements and the container.

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

Halving borders

In case you want to have distinct borders for each element for any purpose, this is a compromise that might suit your needs. Given a desired border-width of 2px the CSS is as follows:

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

This method sets half of the desired border width on both the parent and its children, making the final border 2px thick. Be wary of using this method with fractional pixels (e.g. 1.5px) as you can run into issues.

When using border-color-changing rules the half-width will be apparent, but if you want nicer looking borders this is a much better approach than the first.

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

这篇关于如何创建“折叠"弹性项目及其容器周围的边框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！