flex的第二行如何消耗上方的空间[重复]答案

【问题标题】：How second lines of flex consume space above [duplicate]flex的第二行如何消耗上方的空间[重复]
【发布时间】：2021-02-05 03:58:57
【问题描述】：

我是flexbox的新手，我正在尝试使用flexbox布局网页，非常简单，只有导航栏，侧边栏和内容：

html,
body {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
}

.navigation {
    background-color: aqua;
    border: 1px solid black;
    flex-grow: 1;
    flex-basis: 100%;
    height: 60px;
}

.side-bar {
    background-color: blueviolet;
    border: 1px solid black;
    flex-basis: 68px;
}

.content {
    background-color: burlywood;
    border: 1px solid black;
    flex-grow: 1;
}

<body>
    <div class="navigation">
    </div>
    <div class="side-bar">
    </div>
    <div class="content">
    </div>
</body>

我得到的结果：

我想要的是侧边栏和内容栏在没有高度计算的情况下占用上面的空间（例如：calc(100% - 60px)），如下所示：

【问题讨论】：

你能分享一张你想要得到的图片吗？
flexbox 与css-grid 的主要缺点是，它只能控制宽度或高度，但不能同时控制两者。在您的情况下，您需要同时控制两者，因此使用css-grid 会更好。
@tacoshy：感谢评论，我不知道css-grid，所以我想我必须看看grid
@s.kuznetsov：对不起，它没有回答我的问题我试图避免 calc(100vh - ?)
@cuongle，你为什么不想使用计算(100vh - n)？另外，您需要页脚吗？

标签： html css flexbox

【解决方案1】：

弹性解决方案：

.parent {
  display: flex;
  flex-direction: column;  
}

.a {
   width: 100vw;
    height: 10vh;
    background-color: pink;
}
.b {
  display: flex;
  width: 100vw;
}
.c {
   width: 20vw;
    height: 90vh;
    background-color: red;
}
.d {
    width: 80vw;
    height: 90vh;
    background-color: green;
}

<div class='parent'>
  <div class='a'></div>
  <div class='b'>
    <div class='c'></div>
    <div class='d'></div>
  </div>
</div>

【讨论】：

【解决方案2】：

根据 cmets 的说法：我想为您提供一个替代方案：CSS-Grid。但是，它对 IE11 和 13 的支持有限。

使用显示网格，我们使用：grid-template-column: min-content auto; 向列声明。这样，侧边栏的左侧将占用您在侧边栏上声明的空间以及所有剩余空间。要让导航栏跨越两列，请使用：grid-column: span 2;。

行的情况相同：顶行的高度为 min-content 以使用您为其声明的高度，内容和侧边栏的高度为 auto 以消耗所有剩余空间。

html,
body {
  margin: 0;
  width: 100vw;
  min-height: 100vh;
  display: grid;
  grid-template-columns: min-content auto;
  grid-template-rows: min-content auto;
  box-sizing: border-box;
}

.navigation {
  background-color: aqua;
  border: 1px solid black;
  grid-column: span 2;
  height: 60px;
}

.side-bar {
  background-color: blueviolet;
  border: 1px solid black;
  width: 68px;
}

.content {
  background-color: burlywood;
  border: 1px solid black;
}

<body>
  <div class="navigation">
  </div>
  <div class="side-bar">
  </div>
  <div class="content">
  </div>
</body>

【讨论】：

您不需要将样式应用到 html 和 body 您可能会遇到不需要的结果，因为 body 将成为网格的网格项应用于 html 并且只会占用一个轨道。涂在body上就够了
@TemaniAfif，我刚刚从 OP 复制代码并将其从 flex 调整为 grid。