Flex项目在它们之间创建空间 [英] Flex items create space between them when they wrap

问题描述

我试图在容器中添加一些元素，其中 display：flex 。

问题是当我使屏幕更小时，在我没有设置的元素之间创建一个差距（或至少我不这么认为）。

我创建了一个< a href =https://jsfiddle.net/y5awms4v/ =nofollow> 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 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屋！