在flexbox中具有居中内容的等高列

Question

我想要有两个相同高度的列,它们的内容应该是中间对齐的,所以在每个div的正中心.

问题: "相等高度"和"中间对齐"似乎排除了自己,一个不适用于另一个.

问题:如何创建一个包含两列宽度不同,高度相等且内容集中在每列中间的行？

<!-- 'middle aligned' and 'equal height' don't like each other ? -->
<div class="ui equal height center aligned grid">
    <div class="row">
        <div class="twelve wide purple column">
        <p>Text Text Text</p>
        <p>Text Text Text</p>
        <p>Text Text Text</p>
        <p>Text Text Text</p>
        </div>
        <div class="four wide red column  middle aligned">
            <div class="row">Forward</div>

        </div>
    </div>
</div>

http://jsfiddle.net/kjjd66zk/1/

Answer 1

此布局的关键是将相同的高度应用于主要Flex容器.

然后使flex项嵌套flex容器,这可以使flex项的内容居中.

因此,顶层创造了相同的高度.第二级是中心.

(有关详细信息,请参阅底部的注释.)

以下是基于代码结构的示例:

body {
    height: 300px;             /* for demo purposes */
    color: white;
}

flex-container {
    display: flex;             /* primary flex container */
    flex-direction: row;       /* horizontal alignment of flex items
                                      (default value; can be omitted) */
    align-items: stretch;      /* will apply equal heights to flex items
                                      (default value; can be omitted) */
    height: 100%;
}

flex-item {
    display: flex;             /* nested flex container */
    flex-direction: column;    /* vertical alignment of flex items */
    justify-content: center;   /* center flex items vertically */
    align-items: center;       /* center flex items horizontally */
}

flex-item:first-child {
    flex: 3;                   /* consume 3x more free space than sibling */
    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>

jsFiddle演示

人们有时会将flex项目及其内容视为一个元素.这是不正确的.

Flex容器的HTML结构有三个级别:

• 容器
• 这个项目
• 内容

因此,项目内的内容不代表项目; 它代表一个单独的元素.

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

来自flexbox规范:

4. Flex项目

Flex容器的每个in-flow子项都变为flex项,并且直接包含在flex容器内的每个连续文本行都包含在匿名flex项中.

这就是为什么在上面的解决方案中,flex项目变成了flex容器.它允许在flex项的子项(内容)上使用flex属性.