css - 嵌套的弹性盒（在两个维度上）

Question

我试图了解嵌套弹性框的使用。有一篇关于 flexbox 的好文章https://css-tricks.com/snippets/css/a-guide-to-flexbox/。它将弹性盒的属性分为父组和项目组。我的理解是否正确：如果我有 3 个嵌套的 flexbox，那么中间的 flexbox 既充当 item 的角色，又充当 parent 的角色，因此它的 CSS 属性应该包括 flexbox 的 parent 和 item 属性？

我有代码https://jsfiddle.net/tomrhodes/szmt7pL8/我试图在实践中应用该理论：

<div>
  <div class="container">
    <div class="row2">HEADER</div>
    <div class="container">
      <div class="row2">header</div>
      <div class="container">content</div>
      <div class="row2">footer</div>
    </div>
    <div class="row2">FOOTER</div>
  </div>
</div>

和 CSS：

html,
body {
  height: 100%;
  margin: 0;
  border: solid magenta;
}

.row2 {
  background: #f8f9fa;
  margin-top: 20px;
  flex: 0 1 auto;
  -webkit-flex: 0 1 auto;
}

.container {
  flex: 1 1 auto;
  display: flex;
  display: -webkit-flex;
  flex-flow: column;
  -webkit-flex-flow: column;
  height: auto;
  border: solid blue;
}

我想获得具有 2 个功能的解决方案：

• 外部 flexbox（容器）应该填满可用屏幕的整个空间。目前它在某种程度上是有界的；
• 最内部的 flexbox（带有内容文本）应该是屏幕在两个维度上的灵活区域 - 如果屏幕变宽或变长，那么这个内容应该扩大，在相反的情况下应该缩小。它应该是目前屏幕的唯一灵活区域。

我的嵌套有什么问题？

标签： cssflexbox

Answer 1

似乎不可能将一个 div 用作盒子角色中的嵌套 flexbox - 作为外部 flexbox 的项目和内部内容的父级。应该引入另一个div。解决方案在这里：https ://jsfiddle.net/tomrhodes/8pf1q706/

<div class="outsidebox">
  <div class="box">
    <div class="headerstyle">header</div>
    <div class="contentstyle">
      <div class="outsidebox">
        <div class="headerstyle">header 2</div>
        <div class="contentstyle">content 2</div>
        <div class="footerstyle">footer 2</div>
      </div>
    </div>
    <div class="footerstyle">footer</div>
  </div>
</div>

而 CSS 是：

html,
body {
  height: 100%;
  margin: 0;
  border: solid magenta;
}

.row2 {
  background: #f8f9fa;
  margin-top: 20px;
  flex: 0 1 auto;
  -webkit-flex: 0 1 auto;
}

.container {
  display: flex;
  display: -webkit-flex;
  flex-flow: column;
  -webkit-flex-flow: column;
  height: 100%;
  border: solid blue;
}

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
  border: solid blue;
}

.outsidebox {
  display: flex;
  flex-flow: column;
  height: 100%;
  border: solid purple;
}

.headerstyle {
  flex: 0 1 auto;
  border: solid green;
}

.contentstyle {
  flex: 1 1 auto;
  border: solid green;
}

.footerstyle {
  flex: 0 1 40px;
  border: solid green;
}