如何在 flex 容器中设置间隙(排水沟)? [英] How to set gaps (gutters) in a flex container?

问题描述

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

如果一行中有太多的孩子，那些没有足够空间的孩子会去第二行.使用 flexbox 可以轻松实现，但我也希望能够在元素之间设置装订线.并且一行的第一个和最后一个元素不应该分别有左边距和右边距.

我使用负边距技术来做到这一点，但这里的问题是如果容器太大，右边距会引发溢出问题.我可以通过添加 overflow: hidden 来切断负边距来解决这个问题，但它会引发容器内项目溢出的问题(下拉菜单等).

所以现在我正在寻找能够满足此要求的银弹:

• 一行中有多个项目.项目的宽度可以不同.
• 如果某些项目没有足够的空间，它们会转到下一行.
• 项目之间有间隙(边距)，第一个和最后一个项目分别没有左边距和右边距.
• 容器内可以放置溢出的内容(下拉)，所以我不能使用overflow: hidden
• 可以使用 CSS 网格和 flexbox

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

这里是示例代码:

.container {溢出:隐藏；}.包装{边距:-10px；显示:弹性；flex-wrap: 包裹;}.物品 {弹性:0 0 自动；填充:10px；背景颜色:红色；边距:10px；}

<div class="wrapper"><div class="item">项目的宽度可以变化</div><div class="item">这个例子有效</div><div class="item">但是有个问题</div><div class="item">染色至溢出:隐藏</div><div class="item">这里是放不下的</div><div class="item">内容溢出</div><div class="item">比如下拉菜单</div>

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

有更好的解决方案吗?提前致谢.

解决方案

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

使用 CSS Grid 可以实现简洁高效的解决方案.

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

<块引用>

§盒子之间的间隙

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

gap 属性，以及它的 row-gap 和 column-gap 子属性，为多列、弹性和网格布局提供此功能.

.wrapper {显示:网格；网格模板列:重复(自动适应，minmax(200px，1fr))；网格自动行:50px；网格间距:10px；}.物品 {填充:10px；背景颜色:红色；}身体 {边距:0；}

<div class="wrapper"><div class="item">项目的宽度可以变化</div><div class="item">这个例子有效</div><div class="item">但是有个问题</div><div class="item">染色至溢出:隐藏</div><div class="item">这里是放不下的</div><div class="item">内容溢出</div><div class="item">比如下拉菜单</div>

jsFiddle 演示

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

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.

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:

• 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

Here is my solution of this problem: https://jsbin.com/gabumax

And here code from example:

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

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 isn't your best option here. As you describe, gutter solutions are clumsy and inefficient.

A clean and efficient solution is possible with CSS Grid.

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

§ Gaps Between Boxes

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.

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>

jsFiddle demo

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