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

【问题标题】：Set height of CSS flex elements to the same amount?将 CSS flex 元素的高度设置为相同的量？
【发布时间】：2014-05-05 14:31:23
【问题描述】：

我有 2 个相邻的 div，我使用 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; }

我的问题是我需要将两个“部分”div 的高度设置为相同，并将它们垂直和水平居中。您可以在下面的 JSFiddle 中看到绿色背景与红色的高度不同。如何让两个 div 都达到容器 div 的全高？

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

【问题讨论】：

如何将图像的高度设置为相等？ jsfiddle.net/YGTry

标签： html css center flexbox

【解决方案1】：

我之前遇到过拉伸/居中问题，最终格式化为display: table-cell：

.inner {
    float: left;
    width: 500px;
    display: table;
    background-color: #343434;
    text-align: center;
}
.section {
    display: table-cell;
    width: 50%;
    vertical-align: middle;
}

【讨论】：

【解决方案2】：

您的元素不再垂直拉伸，因为您设置了align-items: center。如果你想让它们的高度相等，它必须是默认的拉伸值。如果您的元素是多行的，那么您可以改用align-content: center，这将为您提供您正在寻找的效果。对于单行 flex 项目，您似乎无法单独通过 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 显示属性的弹性项目。

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;
}

【讨论】：

【解决方案3】：

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

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

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

你也不需要使用浮动，这就是使用灵活容器的全部意义。

【讨论】：