如何在伸缩容器中设置间隙(装订线)? [英] How to set gaps (gutters) in a flex container?

问题描述

我正在尝试创建某种类型的flex容器通用组件.该组件由容器及其连续的子组件组成.

I'm trying to create some kind of universal component of flex container. This component consists of container and its children in a row.

如果一行中的孩子过多，则没有足够空间的孩子将转到第二行.使用flexbox可以轻松实现，但是我也希望能够在元素之间设置装订线.并且一行的第一个和最后一个元素不应分别具有左边界和右边界.

If there are too many children in a line, those who don't have enough space go to second line. It can be easily achieved with flexbox, but also I want to be able to set gutter between elements. And first and last elements of a line shouldn't have left and right margin respectively.

我使用负边距技术来执行此操作，但是这里的问题是，如果容器太大，则右边距会引发溢出问题.我可以解决此问题，添加overflow: hidden可以减少负边距，但是这会引发容器内的项目溢出(下拉菜单等)的问题.

I do this using negative margin technique, but the problem here is that right margin can provoke overflow issues if container is too big. I can solve this problem adding overflow: hidden to cut off negative margin, but it provokes problem with overflowing items inside container (drop-downs, etc).

所以现在我正在寻找可以满足此要求的灵丹妙药:

So now I'm looking for silver bullet, implementation which can satisfy this requirements:

• 连续有多个项目.项目的宽度可以不同.
• 如果某些项目没有足够的空间，则转到下一行.
• 项目(页边距)之间存在间隙，并且第一个项目和最后一个项目都没有左右页边距.
• 可以在容器内部放置溢出的内容(下拉列表)，所以我不能使用overflow: hidden
• 可以使用CSS网格和flexbox

• There are multiple items in a row. Width of items can differ.
• If some items have not enough space, they go to next line.
• There is a gap between items (margin), and first and last item doesn't have left and right margin, respectively.
• Inside container can be placed overflowing content (drop-downs), so I can't use overflow: hidden
• Css grid and flexbox can be used

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

Here is my solution of this problem: 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>

它可以工作，但是这里唯一的缺点是overlow: hidden.因此，我无法在此处放置下拉列表和其他溢出内容.

It works, but the only negative point here is overlow: hidden. Because of this I can't place here dropdowns and other overflowing content.

有更好的解决方案吗?预先感谢.

Any better solution? Thanks in advance.

推荐答案

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

Flexbox isn't your best option here. As you describe, gutter solutions are clumsy and inefficient.

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

A clean and efficient solution is possible with CSS Grid.

Grid暂时在此区域胜过flexbox ，因为Grid接受gap属性.这些属性在flex中尚不可用，但是随着浏览器继续实现 CSS框对齐模块，gap属性将在多个盒装模型(包括flex)中可用.

Grid wins over flexbox in this area for now because Grid accepts the gap properties. These properties are not yet available in flex but, as browsers continue to implement the CSS Box Alignment Module, the gap properties will be available across multiple box models (including flex).

§框之间的间隙

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

While margin and padding can be used to specify visual spacing around individual boxes, it’s sometimes more convenient to globally specify spacing between adjacent boxes within a given layout context, particularly when the spacing is different between boxes as opposed to between the first/last box and the container’s edge.

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

The gap property, and its row-gap and column-gap sub-properties, provide this functionality for multi-column, flex, and grid layout.

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

这篇关于如何在伸缩容器中设置间隙(装订线)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！