弹性项目在包装时会在它们之间创建空间

Question

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

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

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

如您所见，当您缩小屏幕时，第一和第二个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