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

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

这会导致多行弹性项沿着容器的横轴均匀分布。这有点像沿着主轴设置flex: 1：弹性项目均匀地分布在整个线上。

因此，align-content: stretch可能会在弹性项目换行时造成间隙。

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

revised fiddle

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

参考：

8.4. Packing Flex Lines: the align-content property

align-content属性对齐Flex容器的行   当横轴有额外的空间时，flex容器，   类似于justify-content如何对齐单个项目   主轴。注意，此属性对单线flex没有影响   容器。

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

<强> stretch

拉伸线以占据剩余空间。如果剩余的自由空间为负数，则此值与flex-start相同。否则，自由空间在所有线之间平均分配，增加它们的交叉尺寸。

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

Flex项目在换行时会在它们之间创建空间

1 个答案: