Flex项目在它们之间创建空间

本文介绍了Flex项目在它们之间创建空间的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我试图在容器中添加一些元素，其中 display：flex 。 问题是当我使屏幕更小时，在我没有设置的元素之间创建一个差距（或至少我不这么认为）。 我创建了一个 JSFiddle 代表我的问题。 正如你所看到的 如何解决这个问题？ 提前感谢！ html，body {width ：100％; height：100％;}＃container {display：flex;高度：100％; background {color：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％;高度：100％; background-color：yellow;} < div id = container> < div id =leftclass =block>左< / div> < div id =centerclass =block> < div class =flexContainer> < div class =flexDiv>< / div> < / div> < div class =flexContainer> < div class =flexDiv>< / div> < / div> < / div> < div id =rightclass =block>右< / div>< / div> > 解决方案创建flex容器时，初始设置为 align-content：stretch 。 这导致多行flex项目沿着容器的横轴均匀分布。这就像在主轴上设置 flex：1 ：flex项目在整个行上均匀分布。 因此，当弹性广告包装时， align-content：stretch 可能会导致空格。 简单的解决方案是使用 align-content：flex-start 覆盖此设置。 修改了小提示 html，body {width：100％; height：100％;}＃container {display：flex;高度：100％; background {color：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％;高度：100％; background-color：yellow;} < div id = container> < div id =leftclass =block>左< / div> < div id =centerclass =block> < div class =flexContainer> < div class =flexDiv>< / div> < / div> < div class =flexContainer> < div class =flexDiv>< / div> < / div> < / div> < div id =rightclass =block>右< / div>< / div> 参考： 8.4。包装Flex行： align-content 属性 align-content 属性将flex容器的行对齐在 flex容器当横轴有额外的空间类似于 justify-content 在主轴中对齐各个项目。注意，此属性对单行flex 容器没有影响。 属性接受六个值。 stretch 是预设值。 stretch 线条伸展以占用剩余空间。如果剩余可用空间为负，则此值与 flex-start 相同。 其余的值是： flex-start / flex-end / center / 空格 / 空格 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 fiddlehtml,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项目在它们之间创建空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！