包装弹性项目之间的多余空间

Question

当我将flex-container的高度设置为大于flex-item所占的高度时，包裹的项目之间会留有空间。提醒您-调整内容和对齐项目都设置为flex-start。这是代码段（运行后点击整页）

.flex-container {
  min-height: 100vh;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
}
header,
main,
aside,
footer {
  padding: 1rem;
  background-color: tomato;
}
header,
footer {
  width: 100%;
}
main {
  width: 75%;
}
aside {
  flex-grow: 1;
}

<div class="flex-container">
  <header>Header Content</header>
  <main>Main content here.</main>
  <aside>Sidebar content</aside>
  <footer>Footer Content</footer>
</div>

Here's the pen

如果您颠倒了所有属性，则可以用flex-direction: column;复制。这是预期的行为吗？如果是这样，为什么？我有办法解决这个问题吗？

将flex-container高度设置为100vh吗？

Answer 1

如果我很好理解您的问题-您可以在.wrappper内添加以下div flex-container

.wrapper {
  position: relative;
  display: flex;  
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  flex-basis: 100%;
}

body {margin: 0}

.wrapper {
  position: relative;
  display: flex;  
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  flex-basis: 100%;
}

.flex-container {
  min-height: 100vh;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
}

header,
main,
aside,
footer {
  padding: 1rem;
  background-color: tomato;
}
header,
footer {
  width: 100%;
  background-color: blue;
  
}
main {
  flex-basis: 75%;
  flex-grow: 1;
  background-color: yellow;
}
aside {
  flex-grow: 1;
}

<div class="flex-container">
  <div class="wrapper">
  <header>Header Content</header>
  <main>Main content here.</main>
  <aside>Sidebar content</aside>
  <footer>Footer Content</footer>
  </div>
</div>

说明什么以前的解决方案并不wokrs：因为你的柔性物品的高度为1rem +字体大小，和align-items: flex-start;被设定成弯曲而不会更改项目的高度，但把它们放在适当的位置（弯曲-开始）。但是，如果您使用align-items: streth;，则flex将拉伸元素。因为您想为.flex-container使用100vh，所以我们需要使用未拉伸到容器全高的包装器，因为容器仍然有align-items: flex-start;。这包装高度是没有多余的空间了chidren高度的总和。

Answer 2

不添加额外标记的正确答案是align-content: flex-start;-默认是stretch，这就是为什么当flex容器的大小超过其中的元素大小时，包装元素之间要有额外的空间的原因