当它们换行时去除多行 flex 项目之间的空间(间隙) [英] Remove space (gaps) between multiple lines of flex items when they wrap

问题描述

我正在尝试在一个具有设定高度的容器中放置一些相互下方的物品.如果没有剩余空间，项目将彼此相邻.

这是一个想法:

我正在尝试使用 flexbox 来实现这一点，一个具有设置高度的容器，方向设置为 column 并且 flex-wrap 是 wrap:

问题是列之间存在很大差距.

我尝试将 justify-content 和 align-items 都设置为 flex-start，但这可能是默认值.

有什么办法可以解决这个问题吗?

代码如下:

* {box-sizing: 边框框；}身体 {字体系列:无衬线；}.容器 {显示:弹性；flex-wrap: 包裹;高度:300px；弹性方向:列；背景颜色:#ccc；}.项目 {宽度:100px；高度:100px；边距:10px；背景色:番茄；白颜色;字体大小:60px；字体粗细:粗体；文本对齐:居中；填充:15px；}

<div class="items">1</div><div class="items">2</div><div class="items">3</div><div class="items">4</div><div class="items">5</div>

codepen

解决方案

Flex 容器的初始设置是 align-content:stretch.

这意味着多行 flex item 将沿横轴均匀分布.

要覆盖此行为，请将 align-content: flex-start 应用于容器.

<小时>

当您在单行弹性容器(即，flex-wrap: nowrap)中工作时，要使用的属性沿交叉轴分配空间是align-items 和align-self.

当您在多行弹性容器(即，flex-wrap: wrap)中工作时–就像在问题中一样用于沿横轴分布弹性线(行/列)的属性是align-content.

来自规范:

<块引用>

8.3.跨轴对齐:align-items 和 align-self 属性

align-items 设置所有弹性容器项目的默认对齐方式，包括匿名弹性项目.align-self 允许覆盖单个弹性项目的默认对齐方式.

8.4.包装 Flex Lines:align-content财产

align-content 属性在flex 容器，当横轴有额外空间时，类似于justify-content 如何在主轴内对齐各个项目.注意，这个属性对单行 flex 容器没有影响.

align-content 属性有六个值:

• flex-start
• flex-end
• center
• 空格
• 空格
• 拉伸

这是stretch的定义:

<块引用>

拉伸

线条伸展以占用剩余空间.如果剩余可用空间为负，则该值与 flex-start 相同.否则，自由空间会在所有行之间平均分配，从而增加它们的交叉大小.

换句话说，横轴上的align-content:stretch类似于主轴上的flex:1.

I am trying to have a number of items underneath each other in a container with a set height. Items will then carry on next to each other if there's no space left.

This is the idea:

I am trying to achieve this using flexbox, a container with a set height, direction is set to column and flex-wrap is wrap:

The issue is that there are wide gaps between the columns.

I tried setting both justify-content and align-items to flex-start, but that is probably the default value.

Is there any way to solve this?

Here is the code:

* {
  box-sizing: border-box;
}
body {
  font-family: sans-serif;
}
.container {
  display: flex;
  flex-wrap: wrap;
  height: 300px;
  flex-direction: column;
  background-color: #ccc;
}
.items {
  width: 100px;
  height: 100px;
  margin: 10px;
  background-color: tomato;
  color: white;
  font-size: 60px;
  font-weight: bold;
  text-align: center;
  padding: 15px;
}

<div class="container">
  <div class="items">1</div>
  <div class="items">2</div>
  <div class="items">3</div>
  <div class="items">4</div>
  <div class="items">5</div>
</div>

codepen

解决方案

An initial setting of a flex container is align-content: stretch.

This means that multiple lines of flex items will be distributed evenly along the cross axis.

To override this behavior, apply align-content: flex-start to the container.

---

When you're working in a single-line flex container (i.e., flex-wrap: nowrap), the properties to use to distribute space along the cross axis are align-items and align-self.

When you're working in a multi-line flex container (i.e., flex-wrap: wrap) – like in the question – the property to use to distribute flex lines (rows / columns) along the cross axis is align-content.

From the spec:

8.3. Cross-axis Alignment: the align-items and align-self properties

align-items sets the default alignment for all of the flex container’s items, including anonymous flex items. align-self allows this default alignment to be overridden for individual flex items.

8.4. Packing Flex Lines: the align-content property

The align-content property aligns a flex container’s lines within the flex container when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis. Note, this property has no effect on a single-line flex container.

The align-content property takes six values:

• flex-start
• flex-end
• center
• space-between
• space-around
• stretch

Here's the definition for stretch:

stretch

Lines stretch to take up the remaining space. If the leftover free-space is negative, this value is identical to flex-start. Otherwise, the free-space is split equally between all of the lines, increasing their cross size.

In other words, align-content: stretch on the cross axis is similar to flex: 1 on the main axis.

这篇关于当它们换行时去除多行 flex 项目之间的空间(间隙)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！