在元素维度未知时强制在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>

如你所见，我几乎就在那里。但是，我的标题，内容和页脚在两个侧边栏之间共享宽度而不是拉伸到100％。虽然当您知道侧边栏的大小时，可以使用calc()轻松修复此问题，我不会。

以下是问题：虽然在上面的示例中，侧边栏的宽度已知，但在我的项目中并不一定如此。无论任何一个侧边栏的宽度如何，我都希望我的标题，内容和页脚能够伸展，同时仍然保持在彼此之上。

如何使用flexbox实现我想要的外观，只有flexbox？

Answer 1

如果你稍微改变你的标记，并包裹垂直堆叠的元素，你就可以得到它。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

您现在还可以删除设置宽度＆＃39; s / height，优化CSS，并让它随内容增长。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

我建议使用嵌套的flex容器和稍微修改过的HTML结构（需要较少的CSS设置）

＆＃13;

＆＃13;

#flexbox_container {
  background-color: #333;
  display: flex;
  height: 200px;
  width: 100%;
  justify-content: space-between;
  align-items: stretch;
}

.inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
}

header {
  background-color: cyan;
  height: 50px;
  flex-grow: 0;
}

.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;
  flex-grow: 0;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;