等高列在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项目的内容居中。

因此，顶层创建相等的高度。第二级进行居中。

（有关更多详细信息，请参阅底部的注释。）

这是一个基于您的代码结构的示例：

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>

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

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

• 容器
• 该项目
• 内容

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

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

从flexbox规范：

4.弹性项目

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

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