Question

我正在尝试创建某种类型的flex-container通用组件。该组件由容器及其连续的子级组成。如果一行中的孩子过多，则没有足够空间的孩子将转到第二行。使用flexbox可以轻松实现，但是我也希望能够在元素之间设置装订线。线的第一个和最后一个元素不应分别具有左右边界。我使用负边距技术来执行此操作，但是这里的问题是，如果容器太大，则右边距会引发溢出问题。我可以解决这个问题，添加overflow: hidden可以减少负边距，但是这会引发容器内部项目（下拉菜单等）溢出的问题。因此，现在我正在寻找可以满足此要求的灵丹妙药：

连续有多个项目。物品的宽度可以不同
如果某些项目没有足够的空间，则转到下一行
项目（页边距）之间存在间隙，并且第一个项目和最后一个项目分别没有左右页边距
可以在内部容器中放置所有内容（下拉列表），所以我不能使用溢出：隐藏
可以使用CSS网格和flexbox

这是我对这个问题的解决方案： https://jsbin.com/gabumax

这里是示例代码：

.container {
  overflow: hidden;
}

.wrapper {
  margin: -10px;
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 0 0 auto;
  padding: 10px;
  background-color: red;
  margin: 10px;
}

<div class="container">
  <div class="wrapper">
    <div class="item">Width of items can vary</div>
    <div class="item">This example works</div>
    <div class="item">But there is a problem</div>
    <div class="item">Dye to overlow:hidden</div>
    <div class="item">It is impossible to place here</div>
    <div class="item">Overflowing content</div>
    <div class="item">Such as dropdowns</div>
  </div>
</div>

它有效，但是这里唯一的缺点是过低：隐藏。因此，我无法在此处放置下拉列表和其他溢出内容。

有更好的解决方案吗？预先感谢。

Answer 1

Flexbox不是您的最佳选择。正如您所描述的，装订线解决方案笨拙且效率低下。

使用CSS Grid可以提供一种干净高效的解决方案。

由于Grid接受gap属性，因此暂时在该区域胜过flexbox 。这些属性在Flex中尚不可用，但是随着浏览器继续实现CSS Box Alignment Module，gap属性将在多个框模型（包括flex）中可用。

§ Gaps Between Boxes

虽然margin和padding可用于指定视觉间距   围绕单个盒子，有时在全球范围内更方便   在给定的布局上下文中指定相邻框之间的间距，   特别是当盒子之间的间距与   在第一个/最后一个框和容器的边缘之间。

gap属性及其row-gap和column-gap子属性，   为多列，伸缩和网格布局提供此功能。

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-auto-rows: 50px;
  grid-gap: 10px;
}

.item {
  padding: 10px;
  background-color: red;
}

body {
  margin: 0;
}

<div class="container">
  <div class="wrapper">
    <div class="item">Width of items can vary</div>
    <div class="item">This example works</div>
    <div class="item">But there is a problem</div>
    <div class="item">Dye to overlow:hidden</div>
    <div class="item">It is impossible to place here</div>
    <div class="item">Overflowing content</div>
    <div class="item">Such as dropdowns</div>
  </div>
</div>

jsFiddle demo

Answer 2

为避免显示滚动条，可以将负边距仅设置在左侧和顶部。

body {
  margin: 0;
}

.container {
  width:31.7em;
  max-width:100%;
  margin:auto;;
  background:yellow; 
}

.wrapper {
   display: flex;
  flex-wrap: wrap;
  margin-left:-10px;
  margin-top:-10px;
}

.item {
  flex: 0 0 auto;  
  padding: 10px;  
  background-color: red;  
  margin:10px  0  0 10px;
}

<div class="container">
  <div class="wrapper">
    <div class="item">Width of items can vary</div>
    <div class="item">This example works</div>
    <div class="item">But there is a problem</div>
    <div class="item">Dye to overlow:hidden</div>
    <div class="item">It is impossible to place here</div>
    <div class="item">Overflowing content</div>
    <div class="item">Such as dropdowns</div>

  </div>
</div>

或如果文档目录为rtl，则为负负空白

body {
  margin: 0;
  direction:rtl;
}

.container {
  width:31.7em;
  max-width:100%;
  margin:auto;;
  background:yellow; 
}

.wrapper {
   display: flex;
  flex-wrap: wrap;
  margin-right:-10px;
  margin-top:-10px;
}

.item {
  flex: 0 0 auto;  
  padding: 10px;  
  background-color: red;  
  margin:10px 10px  0  0;
}

<div class="container">
  <div class="wrapper">
    <div class="item">Width of items can vary</div>
    <div class="item">This example works</div>
    <div class="item">But there is a problem</div>
    <div class="item">Dye to overlow:hidden</div>
    <div class="item">It is impossible to place here</div>
    <div class="item">Overflowing content</div>
    <div class="item">Such as dropdowns</div>

  </div>
</div>

如何在伸缩容器中设置间隙（装订线）？

2 个答案:

jsFiddle demo