教程：
Flexbox 布局的最简单表单
Flex 布局教程：语法篇
Flex 布局教程：实例篇

1. 父元素为 flex 布局时，如果其中一个子元素有高度，即使另一个子元素没有高度，高度也会被撑开至等高，即默认改变项目的高度:

   
   
   image.png

    <div class="wrap">
        <div class="left">
            left
        </div>
        <div class="right">
            right
        </div>
    </div>

       .wrap {
            display: flex;

            width: 400px;
            margin: 200px auto;
            padding: 20px;
            background-color: #ccc;
        }
        .left {
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
        .right {
            background-color: blue
        }

2. 父元素设置为 flex 布局后，子元素之间没有间隙，如上面所示。
3. 让某个子元素占据剩余横向空间，比如让上面的 .right 元素占据剩余宽度，只需给 .right 加上:

flex-grow: 1;

flex-grow的值是占据剩余空间的比例。

4. 如果需要占据剩余垂直空间，只需让父元素：

flex-direction: column;