伸缩物品在包裹时会在它们之间创建空间

Question

我正在尝试在具有的容器内添加一些元素display: flex。

问题是，当我缩小屏幕时，它会在我尚未设置的元素之间形成间隙（或者至少我不这么认为）。

我创建了一个JSFiddle来代表我的问题。

如您所见，当您缩小屏幕时，第一和第二个div之间会有一个蓝色空间。

我该如何解决？

提前致谢！

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>

Answer 1

创建Flex容器时，初始设置为align-content: stretch。

这导致多行柔性物品沿容器的横轴均匀地分布。有点像flex: 1沿主轴设置：伸缩项均匀地分布在整个直线上。

结果，align-content: stretch柔性物品包装时可能会导致缝隙。

简单的解决方案是使用覆盖此设置align-content: flex-start。

修正的小提琴

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>

参考：

8.4。包装伸缩线：align-content 属性

align-content当横轴上有多余的空间时，此属性会在Flex容器内将Flex容器的线justify-content对齐，类似于在主轴内对齐单个项目的方式。注意，此属性对单行flex容器无效。

该属性接受六个值。stretch是默认值。

stretch

线拉伸以占据剩余空间。如果剩余的自由空间为负，则此值等于flex-start。否则，自由空间会在所有线之间平均分配，从而增加其交叉尺寸。

其余值为：flex-start/ flex-end/ center/ space-between/space-around