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

概述我有两个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="sec 我有两个divs彼此相邻,我使用flex和justify-content / align-items垂直和水平居中.

例
HTML：

<div >    <div >        <img src="http://i.imgur.com/hEOMgVf.png">    </div>    <div >         <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/

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

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

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

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

总结

以上是内存溢出为你收集整理的html – 将CSS flex元素的高度设置为相同的量？全部内容，希望文章能够帮你解决html – 将CSS flex元素的高度设置为相同的量？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。