Flexbox 拉伸不够远

Question

我正在使用 flexbox 为 Web 应用程序创建基本布局。我希望在顶部有一个菜单，在其下方，左侧是主要内容区域，右侧是次要内容区域，两者都垂直填充菜单下方剩余的空间。如果 HTML 中只包含内容区域，则延伸覆盖所有内容。但是，当我包含菜单时，菜单和内容区域之间会出现很多空白。

在 JS 小提琴中，我添加了一些 JavaScript 以在您单击任一链接时删除菜单，以便更好地了解我希望在菜单和两个内容之间留出多少空白 (1rem)地区。

这可以使用 flex 实现吗？谢谢！

$(document).ready(function() {
  $("a").click(function() {
    $(this).closest(".main-menu").remove();
  })
})

html {
  height: 100%;
}

body {
  display: flex;
  min-height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  flex-wrap: wrap;
  align-content: stretch;
}

.main-menu {
  width: 90%;
  margin: 1rem calc(5% - 1px) 1rem calc(5% - 1px);
  padding: 1rem;
  border: 1px dashed black;
  align-self: flex-start;
}

.main-menu ul {
  margin: 0;
  border: 0;
  padding: 0;
  display: inline;
}

.main-menu ul li {
  margin: 0;
  border: 0;
  padding: 0;
  display: inline;
}

.primary-stuff {
  margin: 1rem 1rem 1rem calc(5% - 1px);
  width: calc(75% - 1rem - 1px);
  border: 1px dashed black;
}

.secondary-stuff {
  margin: 1rem calc(5% - 1px) 1rem 1rem;
  width: calc(15% - 1rem - 1px);
  border: 1px dashed black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-menu">
  <ul>
    <li><a>Link 1</a></li>
    <li><a>Link 2</a></li>
  </ul>
</div>
<div class="primary-stuff"></div>
<div class="secondary-stuff"> </div>

<div style="position:absolute;background:#FFC; width: calc(5% - 1px); height: 100%; left: 0;"></div>

<div style="position:absolute;background:#FFC; width: calc(5% - 1px); height: 100%; right: 0; top: 0;"></div>

<div style="position:absolute;background:#FFC; height: 1rem; width: 100%; right: 0; top: 0;"></div>

<div style="position:absolute;background:#FFC; height: 1rem; width: 100%; right: 0; bottom: 0;"></div>

小提琴：

https://jsfiddle.net/don01001100/kdg04ubr/

Answer 1

因为the way align-content works with wrap，你不能用 flexbox 真正做到这一点。

但是，使用 CSS Grid 布局布局很简单：

body {
  display: grid;
  grid-template-columns: 75% 1fr;
  grid-template-rows: auto 1fr;
  grid-gap: 1rem;
  min-height: 100vh;
}

nav {
  grid-column: 1 / -1;
}

/* non-essential decorative styles */
body             { margin: 0; padding: 1rem 2rem; }
nav              { background-color: lightgreen; padding: 1rem; }
.primary-stuff   { background-color: lightblue; }
.secondary-stuff { background-color: orange; }
*                { box-sizing: border-box; }

<nav>
  <a>Link 1</a>
  <a>Link 2</a>
</nav>
<div class="primary-stuff"></div>
<div class="secondary-stuff"> </div>

此外，您对边距的所有这些计算都是不必要的。这是一个可以简化代码的简单解决方案：Flexbox: 4 items per row

Answer 2

您可能会发现Grid Layout 更适合这种类型的布局，因为它提供了一种更简洁的方法来按您需要的方式排列元素，而无需额外的 HTML 标记。

您可以使用 CSS-grid 实现所需的布局，如下所示：

html {
  height: 100%;
}

body {
  
  /* Cause grid to fill vertical space */
  height:100%;
  
  /* Prevent overflow due to padding */
  box-sizing:border-box;
   
  /* Use grid display type */
  display: grid;

  /* Tells grid to cause second row to fill 
     avaible/remaining vertical space */
  grid-template-rows: auto 1fr;

  /* Define the grid layout, in terms of areas
     that are distributed between 3 colums and
     2 rows */
  grid-template-areas: 
    "menu menu menu" 
    "primary primary secondary";
  
  /* Specify spacing between grid elements */
  grid-gap: 1rem;
  
  margin: 0;
  padding: 1rem;
  background:grey;
}

.main-menu {
  background: pink;
  
  /* Accociate the main-menu with the menu area
     of your grid-template-areas defined above */
  grid-area: menu;
}

.main-menu ul {
  margin: 0;
  padding: 0;
  display: inline;
}

.main-menu ul li {
  margin: 0;
  padding: 0;
  display: inline;
}

.primary-stuff {
  background: lightblue;
  /* Accociate the primary-stuff with the primary area
     of your grid-template-areas defined above */
  grid-area: primary;
}

.secondary-stuff {
  background: lightgreen;
  /* Accociate the secondary-stuff with the secondary area
     of your grid-template-areas defined above */
  grid-area: secondary;
}

<div class="main-menu">
  <ul>
    <li><a>Link 1</a></li>
    <li><a>Link 2</a></li>
  </ul>
</div>
<div class="primary-stuff">
  primary content
</div>
<div class="secondary-stuff">
  secondary content
</div>