等高列在flexbox中居中

此布局的关键是将相等的高度应用于主伸缩容器。

然后，将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>

人们有时将d性项目及其内容视为一个要素。这是不正确的。

flex容器的HTML结构具有三个级别：

• 容器
• 该项目
• 内容

因此，项目内部的内容不代表该项目；它代表一个单独的元素。

如果项目内的内容是文本，则它将成为匿名元素。

从flexbox规范：

4.d性项目

flex容器的每个流入子元素都将成为一个flex项目，而直接包含在flex容器内的每个连续文本都将包裹在一个匿名flex项目中。

这就是为什么在上面的解决方案中，flex项变为flex容器。它允许在flex项目（内容）的子项上使用flex属性。