Flex box布局 弹性盒子（1）

        使用: display:flex;

                当我们为父元素设为flex布局以后，子元素的float、clear和vertical-align属性都将失效

        Flex布局父项常见属性

                flex-direction：设置主轴的方向。Row| row-reverse |column |column-reverse

                justify-content: 设置主轴上的子元素排列方式。

                flex-wrap：设置子元素是否换行。

                align-content：设置侧轴上的子元素的排列方式(多行)。

                align-items：设置侧轴上的子元素排列方式(单行)。

                flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap。

         flex-direction：设置主轴的方向。

属性值	说明
row	默认值从左到右
Row-reverse	从右到左
column	从上到下
column-reverse	从下到上

           ustify-content 设置主轴上的子元素排列方式

                注意：使用这个属性一定要确定主轴的方向

属性值	说明
Flex-start	默认值从头部开始如果主轴是x轴，从左到右
Flex-end	从尾部开始排列
Center	在主轴居中对齐(如果主轴是x轴则水平居中)
Space-around	平分剩余空间
Space-between	先两边贴边 再平分剩余空间(重要)

            

            flex-wrap设置子元素是否换行

属性值	说明
nowrap	默认值，不换行
wrap	换行

            align-items 设置侧轴上的子元素排列方式(单行/不换行)

属性值	说明
Flex-start	从上到下
Flex-end	从下到上
center	挤在一起居中(垂直居中)
stretch	拉伸(默认值)

             align-content 设置侧轴上的子元素的排列方式(多行/有换行)

属性值	说明
flex-start	默认值在侧轴的头部开始排列
flex-end	在侧轴的尾部开始排列
center	在侧轴中间显示
space-around	子项在侧轴先分布在两头，在平分剩余空间
space-between	子项在侧轴先分布在两头，在平分剩余空间
stretch	设置子项元素高度平分父元素高度

                Align-content和align-items区别？

                        align-items适用于只有一行情况下，只有上对齐、下对齐、居中和拉伸。

align-content适应于换行(多行)的情况下（单行情况下是无效），可以设置上对齐、下对齐、居中和拉伸以及平均分配剩余空间等属性值。

总结就是 单行找align-items 多行找align-content