嵌套 flexbox 和 CSS 网格布局中的空间分布问题答案

【问题标题】：Problem with space distribution in nested flexbox and CSS grid layout嵌套 flexbox 和 CSS 网格布局中的空间分布问题
【发布时间】：2019-05-16 01:48:49
【问题描述】：

据我所知，我的aside 元素和div.content 应该占用div.container 中可用空间的一半。此外，div.content 中的网格应占用所有可用的垂直空间。

问题是网格项目无法采用任何高度（如果没有硬编码）。此外，网格占用的所有垂直空间（因为grid-gap）都来自aside元素和div.content，这意味着div.content窃取aside的垂直空间，这两个元素不再相同的高度。

aside 的高度等于div.content 的高度减去网格的高度。

总之，flexbox为div.content设置的高度是禁止使用的。添加到 div.content 的子元素表现得更像它的兄弟元素。

* {
  box-sizing: border-box;
}

body {
  min-height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
}

html {
  height: 100%;
}

header,
footer {
  background-color: #1A1C22;
  height: 100px;
}

.container {
  flex: 1 0 400px;
  display: flex;
  flex-direction: column;
  padding-top: 12px;
}

aside {
  background-color: #6C757D;
  flex: 1 1 auto;
}

.content {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(6, 1fr);
  grid-gap: 20px;
  border: 2px solid blue;
}

section {
  background-color: #343A40;
  border: 1px solid red;
}

<body>
  <header></header>
  <div class="container">
    <aside></aside>
    <div class="content">
      <section></section>
      <section></section>
      <section></section>
      <section></section>
      <section></section>
      <section></section>
    </div>
  </div>
  <footer></footer>
</body>

【问题讨论】：

你应该考虑 flex:1 1 0% (the flex-basis:0%) and min-height:0 for content 但仍然是同样的问题
^ 以上似乎在 Firefox 上可以正常工作，但在 Chrome 上却不行

标签： html css flexbox css-grid

【解决方案1】：

您可以通过显式指定height而不是flex-basis并将flex: 1 0 auto设置为.container，使其在Chrome和Firefox中都能正常工作。对于content 和aside 也使用flex: 1 而不是flex: 1 1 auto（设置flex-basis: 0 而不是auto） - 请参见下面的演示和fiddle：

* {
  box-sizing: border-box;
}

body {
  min-height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
}

html {
  height: 100%;
}

header,
footer {
  background-color: #1A1C22;
  height: 100px;
}

.container {
  /* flex: 1 0 400px; */
  display: flex;
  flex-direction: column;
  padding-top: 12px;
  height: 400px; /* added */
  flex: 1 0 auto; /* added */
}

aside {
  background-color: #6C757D;
  flex: 1; /* changed */
}

.content {
  flex: 1; /* changed */
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(6, 1fr);
  grid-gap: 20px;
  border: 2px solid blue;
}

section {
  background-color: #343A40;
  border: 1px solid red;
}

<header></header>
<div class="container">
  <aside></aside>
  <div class="content">
    <section></section>
    <section></section>
    <section></section>
    <section></section>
    <section></section>
    <section></section>
  </div>
</div>
<footer></footer>

上面的解决方案有几个问题：

对于 列 flexboxes 为正确的行为指定高度并不是那么直观，
请注意，aside 和 content 之间仍然存在 4px 的高度差异，这显然是内容的 2px 边框。

使用 CSS Grid 进行布局

网格布局很容易解决这些问题 - 弹性盒与一维解决方案一样好，但在诸如此类的某些布局中却达不到标准。在这里，我将删除 container 包装器并使用 4 行布局 (grid-template-rows: 100px minmax(200px, 1fr) minmax(200px, 1fr) 100px;)：

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  margin: 0;
  display: grid;
  grid-template-rows: 100px minmax(200px, 1fr) minmax(200px, 1fr) 100px;
}

aside {
  background-color: #6C757D;
}

.content {
  display: grid;
  grid-auto-rows: 1fr;
  grid-gap: 10px;
  border: 2px solid blue;
}

.content section {
  background-color: #343A40;
  border: 1px solid red;
}

header,
footer {
  background-color: #1A1C22;
}

<header></header>
<aside></aside>
<article class="content">
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
</article>
<footer></footer>

【讨论】：

@biggerleb 如果答案对您有帮助，也点赞，谢谢 :)