html - 当元素尺寸未知时在 flexbox 中强制断点？

Question

在开始之前，让我先向您展示一下我想用 flexbox 实现的目标，以及到目前为止我已经实现的目标。

这是我想要的样子:

table {
  background-color: #333;
  border-collapse: collapse;
  height: 200px;
  width: 100%;
}

.sidebar1 {
  background-color: orange;
  width: 100px;
}

.header {
  background-color: cyan;
  height: 50px;
}

.sidebar2 {
  background-color: red;
  width: 100px;
}

.main {
  background-color: lightgrey;
}

.footer {
  background-color: green;
  height: 50px;
}

<table>
  <tr>
    <td class="sidebar1" rowspan="3"></td>
    <td class="header"></td>
    <td class="sidebar2" rowspan="3"></td>
  </tr>
  <tr>
    <td class="main"></td>
  </tr>
  <tr>
    <td class="footer"></td>
  </tr>
</table>

这是我取得的成就:

#flexbox_container {
  background-color: #333;
  display: flex;
  flex-flow: row wrap;
  height: 200px;
  width: 100%;
}

header {
  background-color: cyan;
  flex-grow: 1;
  height: 50px;
  order: 2;
}

.sidebar1 {
  background-color: orange;
  order: 1;
  width: 100px;
}

main {
  align-self: center;
  background-color: lightgrey;
  flex-grow: 1;
  height: calc(100% - 50px - 50px);
  order: 2;
}

.sidebar2 {
  background-color: red;
  order: 4;
  width: 100px;
}

footer {
  align-self: flex-end;
  background-color: green;
  flex-grow: 1;
  height: 50px;
  order: 3;
}

<div id="flexbox_container">
  <header>
  </header>
  <nav class="sidebar1">
  </nav>
  <main>
  </main>
  <nav class="sidebar2">
  </nav>
  <footer>
  </footer>
</div>

如您所见，我快完成了。但是，我的页眉、内容和页脚共享两个侧边栏之间的宽度，而不是拉伸(stretch)到 100%。当您知道侧边栏的大小时，可以使用 calc() 轻松解决这个问题，我不知道。

问题在这里:虽然在我上面的示例中侧边栏的宽度是已知的，但在我的元素中不一定是这种情况。我希望我的页眉、内容和页脚能够拉伸(stretch)，而不管任何一个侧边栏的宽度如何，同时仍然保持在彼此之上。

如何使用 flexbox 并且只使用 flexbox 来实现我想要的外观？

Answer 1

如果您稍微更改您的标记，并包装垂直堆叠的元素，您就会得到这个。

.flexbox_container {
  display: flex;
  background-color: #333;
  height: 200px;
}
.flexbox_inner {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
header {
  background-color: cyan;
  height: 50px;
}
.sidebar1 {
  background-color: orange;
  width: 100px;
}
main {
  background-color: lightgrey;
  flex-grow: 1;
}
.sidebar2 {
  background-color: red;
  width: 100px;
}
footer {
  background-color: green;
  height: 50px;
}

<div class="flexbox_container">
  <nav class="sidebar1">
  </nav>
  <div class="flexbox_inner">
    <header>
    </header>
    <main>
    </main>
    <footer>
    </footer>
  </div>
  <nav class="sidebar2">
  </nav>
</div>

---

您现在还可以删除设置的宽度/高度，优化 CSS 并让它随内容增长。

.flexbox_container {
  background-color: #333;
  display: flex;
}
.flexbox_inner {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
header, .sidebar1, main, .sidebar2, footer {
  padding: 10px;
}
header {
  background-color: cyan;
}
.sidebar1 {
  background-color: orange;
}
main {
  background-color: lightgrey;
  flex-grow: 1;
}
.sidebar2 {
  background-color: red;
}
footer {
  background-color: green;
}

<div class="flexbox_container">
  <nav class="sidebar1">
   Side bar 1, wider<br>than side bar 2
  </nav>
  <div class="flexbox_inner">
    <header>
     Header with<br>2 lines of text
    </header>
    <main>
     Content<br>Content<br>Content
    </main>
    <footer>
     Footer
    </footer>
  </div>
  <nav class="sidebar2">
   Side bar 2
  </nav>
</div>