在css中，flex弹性布局可以实现内部对象左右、垂直的对齐，在多个html对象中，设置flex后一般情况下，内部的对象高度是保持一致的。比如一个div设置了flex，内部有3个div，这3个div的高度以最高的一个div高度值为准保持一致，如图。

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="Generator" content="EditPlus®">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>Document</title>
    <style>
        .flex {display:flex;}
        .left {background-color:#fa0;width:100px;}
        .middle {background-color:#3af;width:200px;}
        .right {background-color:#cddc39;width:300px;height:200px;}
    </style>
</head>
<body>
    <div class="flex">
        <div>a</div>
        <div>b</div>
        <div>c</div>
    </div>
</body>
</html>

但是有时候也会发生高度不一致的情况，如图：

经过代码检查后，发现是align-items设置所引起的。如果设置align-items:normal，就会使div高度保持一致，如果不是normal，div的高度就不一致。

#使内部div的高度不一致，以各自高度为准
.flex {display:flex;align-items:flex-start;}

#使内部div的高度一致，以最高高度为准
.flex {display:flex;align-items:normal;}