此布局的关键是将相等的高度应用于主伸缩容器。
然后，将flex项目嵌套在flex容器中，以使flex项目的内容居中。
因此，顶层创建相等的高度。第二级进行居中。
（有关更多详细信息，请参阅底部的注释。）
这是一个基于您的代码结构的示例：
body { height: 300px; color: white;}flex-container { display: flex; flex-direction: row; align-items: stretch; height: 100%;}flex-item { display: flex; flex-direction: column; justify-content: center; align-items: center; }flex-item:first-child { flex: 3; background-color: #a333c8;}flex-item:last-child { flex: 1; background-color: #db2828;}<flex-container> <flex-item><!-- also flex container --> <p>Text Text Text</p> <p>Text Text Text</p> <p>Text Text Text</p> <p>Text Text Text</p> </flex-item> <flex-item><!-- also flex container --> <div>Forward</div> </flex-item></flex-container>人们有时将弹性项目及其内容视为一个要素。这是不正确的。
flex容器的HTML结构具有三个级别：
- 容器
- 该项目
- 内容
因此，项目内部的内容不代表该项目；它代表一个单独的元素。
如果项目内的内容是文本，则它将成为匿名元素。
从flexbox规范：
4.弹性项目
flex容器的每个流入子元素都将成为一个flex项目，而直接包含在flex容器内的每个连续文本都将包裹在一个匿名flex项目中。
这就是为什么在上面的解决方案中，flex项变为flex容器。它允许在flex项目（内容）的子项上使用flex属性。
