移除多行弹性项目之间的空间(间隙)
我试图在一个具有设定高度的容器中将多个项目放在一起.如果没有剩余空间，项目将彼此相邻.
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.
这就是想法:
我正在尝试使用 flexbox 来实现这一点，这是一个具有设定高度的容器，方向设置为 column 并且 flex-wrap 是 wrap:
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.
我尝试将 justify-content 和 align-items 都设置为 flex-start，但这可能是默认值.
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?
代码如下:
* {
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
推荐答案
flex容器的初始设置是align-content:stretch.
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.
要覆盖此行为，请将 align-content: flex-start 应用于容器.
To override this behavior, apply align-content: flex-start to the container.
当您在 单行 flex 容器(即 flex-wrap: nowrap)中工作时，要使用的属性沿交叉轴分配空间的方法是 align-items 和 align-self.
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.
当您在 多行 flex 容器(即 flex-wrap: wrap)中工作时 –就像在问题中一样 –用于沿交叉轴分布 flex 行(行/列) 的属性是 align-content.
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.
来自规范:
8.3.跨轴对齐:align-items 和 align-self 属性
align-items 设置所有弹性容器项目的默认对齐方式，包括匿名弹性项目.align-self 允许为单个 flex 项覆盖此默认对齐方式.
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.包装 Flex Lines:align-content属性
align-content 属性在当横轴有额外空间时，弹性容器，类似于justify-content 如何在主轴内对齐单个项目.请注意，此属性对单行 flex 容器没有影响.
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.
align-content 属性有六个值:
弹性开始flex-end中心之间的空格空间环绕拉伸
这是 stretch 的定义:
拉伸
线条伸展以占据剩余空间.如果剩余的可用空间为负，则此值与 flex-start 相同.否则，空闲空间将在所有行之间平均分配，从而增加它们的交叉大小.
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.
也就是说，横轴上的align-content:stretch类似于主轴上的flex:1.
In other words, align-content: stretch on the cross axis is similar to flex: 1 on the main axis.
相关文章