包装弹性项目之间不需要的空间

Question

当我将 flex-container 高度设置为大于 flex-items 占用的高度时，包裹的项目之间会有空间。请注意 - justify-content 和 align-items 都设置为 flex-start。这里是sn-p（运行后点击整页）

.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

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

Answer 2

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

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

解释什么以前的解决方案不起作用：因为您的弹性项目的高度设置为 1rem+字体大小，并且设置了 align-items: flex-start; 所以弹性不会改变项目的高度，而是将它们放在适当的位置（flex-start ）。但是如果你使用align-items: streth; 那么 flex 会拉伸元素。因为您希望 .flex-container 有 100vh，所以我们需要使用未拉伸到容器全高的包装器，因为容器仍然有 align-items: flex-start;。包装高度是他的孩子身高的总和，没有额外的空间。