flex布局

一.什么是flex布局

是Flexible Box的缩写，意为“弹性布局”，具有非常高的灵活性。

二.属性

1. flex父元素

        1. flex-direction：定义元素要在哪个方向上排列元素。

                1. column：设置垂直垂直排列元素（从上到下）

                2. column-reverse：垂直排列元素（但从下到上）

                3. row：水平排列元素（从左到右）

                4. row-reverse：水平排列元素（从右到左）

        2. flex-wrap：设置元素是否换行，默认在使用flex布局时元素是不换行的。

                1. wrap：在一行占满元素时换行。

                2. nowrap：不换行

                3. wrap-reverse：以相反的顺序换行

        3. flex-flow：用于同时设置flex-direction和flex-wrap的简写，如：

                1. row wrap：从左到右排列的同时在一行的元素占满时换行

        4. justify-content：对元素进行水平对齐

                1. center：在元素的中心对齐；

                2. flex-start：在元素的开头对齐

                3. flex-end：在元素末尾对齐

                4. space-around：如果空间足够大的话均匀的对齐元素，元素左右的间距一致

                5. space-between：第一个元素和最后一个元素分别在最开头和最末尾，其余元素之间均匀的对齐。

        5. align-items：垂直对齐元素

                1. center：元素中间对齐。

                2. flex-start：在元素顶部对齐

                3. flex-end：在元素末尾对齐

                4. stretch：拉伸flex以填充元素对齐

                5. baseline：元素根据基线对齐

        6. align-content：用于对齐弹性线

                1. space-between： 第一个元素在顶部，最后一个元素在底部，其余元素均匀对齐，间距一致。

                2. space-around：元素与元素之间间距一致，平均的分布。

                3. stretch：拉伸元素对于

                4. center：居中对齐

                5. flex-start：顶部对齐

                6. flex-end：底部对齐

2. 子元素

        1. order：用于项目的顺序，值为数字，值越大权重越高，越靠前

        2. flex-grow：相对于其他子元素宽度占比多大，值为数字

        3. flex-shrink：相对于其他子元素收缩多少，值为数字

        4. flex-basis：规定初始长度

        5. flex：flex-grow、flex-shrink和flex-basis属性的简写

        6. align-self：规定弹性容器内所选项目的对齐方式，将覆盖align-items属性所设置的默认对齐方式。