将CSS flex元素的高度设置为相同的量？

Question

我有两个divs彼此相邻,我使用flex和justify-content/align-items垂直和水平居中.

示例HTML:

<div class="inner">
    <div class="section green">
        <img src="http://i.imgur.com/hEOMgVf.png">
    </div>
    <div class="section red">
         <img src="http://i.imgur.com/nEybO1g.png">
    </div>
</div>

CSS:

.inner {
    float: left;
    width: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #343434;
    text-align: center;
}
.section {
    float: left;
    flex: 1;
}

.green { background-color: #7dc242; }
.red { background-color: #ed1c24; }

我的问题是我需要将两个'section'div的高度设置为相同,并将它们垂直和水平居中.您可以在下面的JSFiddle中看到绿色背景与红色的高度不同.如何让两个div成为容器div的整个高度？

这是我所拥有的简化的JSFiddle:http: //jsfiddle.net/beK28/1/

Answer 1

为了达到你想要的效果,你不应该尝试在容器元素中进行任何对齐,而应该设置.section为display:flex.然后,您可以在子元素中正确地对齐和居中图像.

.section {
    align-items: center;
    display: flex;
    flex: 1;
    justify-content:center;
    text-align: center;
}

http://jsfiddle.net/beK28/8/

您也不需要使用float,这是使用灵活容器的重点.

Answer 2

因为设置好了，所以元素不再垂直拉伸align-items: center。如果希望它们的高度相等，则必须将其作为默认值Stretch。如果您的元素是多行的，那么您可以align-content: center改用它，这将为您提供所需的效果。对于单行伸缩项目，似乎仅通过Flexbox即可获得垂直居中+相等高度。

http://jsfiddle.net/beK28/6/

.inner {
    float: left;
    width: 400px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    background-color: #343434;
    text-align: center;
    height: 500px;
}

但是请注意，您可以使用具有table-cell的display属性的弹性项目。

http://jsfiddle.net/beK28/7/

.inner {
    float: left;
    width: 400px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    background-color: #343434;
    text-align: center;
    height: 500px;
}
.section {
    display: table-cell;
    flex: 1;
}