Flex 项目在包装时在它们之间创建空间
[英] Flex items create space between them when they wrap
本文介绍了Flex 项目在包装时在它们之间创建空间的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试在具有 display: flex 的容器中添加一些元素.
问题是当我把屏幕变小时，它会在我没有设置的元素之间产生间隙(或者至少我不这么认为).
我创建了一个代表我的问题的 JSFiddle.
如您所见，当您将屏幕变小时，第一个和第二个 div 之间有一个蓝色空间.
我该如何解决?
提前致谢！
html,身体 {宽度:100%；高度:100%；}#容器 {显示:弹性；高度:100%；背景颜色:蓝色；}.堵塞 {弹性:1；}#剩下 {背景颜色:绿色；}#中央 {显示:弹性；弹性:1；flex-wrap: 包裹;}#对 {背景颜色:橙色；}.flexContainer {弹性:1；宽度:50%；最小宽度:100px；最大宽度:50%；高度:150px；背景颜色:红色；填充:10px；}.flexDiv {宽度:100%；高度:100%；背景颜色:黄色；}
<div id="left" class="block">左</div><div id="center" class="block"><div class="flexContainer"><div class="flexDiv"></div>
<div class="flexContainer"><div class="flexDiv"></div>
<div id="right" class="block">Right</div>
解决方案
创建弹性容器时，初始设置为align-content:stretch.>
这会导致多行 flex 项目沿容器的交叉轴均匀分布.这有点像沿着主轴设置 flex: 1 :弹性项目均匀地分布在这条线上.
因此，align-content:stretch 可能会在 flex 项目环绕时造成间隙.
简单的解决方案是使用 align-content: flex-start 覆盖此设置.
修正小提琴
html,身体 {宽度:100%；高度:100%；}#容器 {显示:弹性；高度:100%；背景颜色:蓝色；}.堵塞 {弹性:1；}#剩下 {背景颜色:绿色；}#中央 {显示:弹性；弹性:1；flex-wrap: 包裹;对齐内容:flex-start；/* 新的 */}#对 {背景颜色:橙色；}.flexContainer {弹性:1；宽度:50%；最小宽度:100px；最大宽度:50%；高度:150px；背景颜色:红色；填充:10px；}.flexDiv {宽度:100%；高度:100%；背景颜色:黄色；}
<div id="left" class="block">左</div><div id="center" class="block"><div class="flexContainer"><div class="flexDiv"></div>
<div class="flexContainer"><div class="flexDiv"></div>
<div id="right" class="block">Right</div>
参考:
<块引用>8.4.包装 Flex Lines:align-content财产
align-content 属性将 flex 容器的行对齐当横轴有额外空间时的弹性容器，类似于 justify-content 在主轴.注意，这个属性对单行 flex 没有影响容器.
该属性接受六个值.stretch 是默认值.
<块引用>拉伸
线条伸展以占用剩余空间.如果剩余可用空间为负，则该值与 flex-start 相同.否则，自由空间会在所有行之间平均分配，从而增加它们的交叉大小.
其余值为:flex-start/flex-end/center/space-between/空格
I am trying to add some elements inside a container that has display: flex.
The problem is that when I make the screen smaller it creates a gap between the elements that I have not set (or at least I do not think so).
I have created a JSFiddle that represents my problem.
As you can see, there is a blue space between the first and the second divs when you make the screen smaller.
How can I fix it?
Thanks in advance!
html,
body {
width: 100%;
height: 100%;
}
#container {
display: flex;
height: 100%;
background-color: blue;
}
.block {
flex: 1;
}
#left {
background-color: green;
}
#center {
display: flex;
flex: 1;
flex-wrap: wrap;
}
#right {
background-color: orange;
}
.flexContainer {
flex: 1;
width: 50%;
min-width: 100px;
max-width: 50%;
height: 150px;
background-color: red;
padding: 10px;
}
.flexDiv {
width: 100%;
height: 100%;
background-color: yellow;
}
<div id="container">
<div id="left" class="block">Left</div>
<div id="center" class="block">
<div class="flexContainer">
<div class="flexDiv"></div>
</div>
<div class="flexContainer">
<div class="flexDiv"></div>
</div>
</div>
<div id="right" class="block">Right</div>
</div>
解决方案
When you create a flex container, an initial setting is align-content: stretch.
This causes multiple lines of flex items to distribute themselves evenly along the cross axis of the container. It's kind of like setting flex: 1 along the main axis: the flex items spread evenly across the line.
As a result, align-content: stretch may cause gaps when flex items wrap.
The simple solution is to override this setting with align-content: flex-start.
revised fiddle
html,
body {
width: 100%;
height: 100%;
}
#container {
display: flex;
height: 100%;
background-color: blue;
}
.block {
flex: 1;
}
#left {
background-color: green;
}
#center {
display: flex;
flex: 1;
flex-wrap: wrap;
align-content: flex-start; /* NEW */
}
#right {
background-color: orange;
}
.flexContainer {
flex: 1;
width: 50%;
min-width: 100px;
max-width: 50%;
height: 150px;
background-color: red;
padding: 10px;
}
.flexDiv {
width: 100%;
height: 100%;
background-color: yellow;
}
<div id="container">
<div id="left" class="block">Left</div>
<div id="center" class="block">
<div class="flexContainer">
<div class="flexDiv"></div>
</div>
<div class="flexContainer">
<div class="flexDiv"></div>
</div>
</div>
<div id="right" class="block">Right</div>
</div>
Reference:
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 property accepts six values. stretch is the default.
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.
The remaining values are: flex-start / flex-end / center / space-between / space-around
这篇关于Flex 项目在包装时在它们之间创建空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
