flex弹性布局常用属性总结介绍

flex称为弹性布局，布局很简单，但是pc端兼容性较差。

flex布局一共有如下的名称：弹性布局，伸缩布局，弹性盒布局，伸缩盒布局，弹性盒布局，flex布局。他们都是指的flex布局。

flex布局特点：

①为父元素添加flex后，子元素的float，clear，vertical-align属性失效。

②行内元素可自定义高度和宽度。

③任何元素都可用。

④display：flex 加在父元素上面。

⑤设置flex后子元素一行排列

叫法：采用flex布局的元素称为flex容器，子元素称为flex项目（子容器）。

                                                                                                                                                           

关于flex布局父项常见属性（写在父元素里）

flex-direction	设置主轴方向
justify-content	设置主轴上子元素排列方式
flex-wrap	设置主轴上子元素是否换行
align-items	设置侧轴上子元素的排列方式（单行）
align-content	设置侧轴上子元素的排列方式（多行）
flex-flow	复合写法同时设置了flex-direction和flex-warp

（1）flex-direction属性（设置主轴方向）

注意：设置谁为主轴剩下的就为侧轴。

row	x轴 从左到右 【默认】
row-reverse	x轴 从右到左
column	y轴 从上到下
column-reverse	y轴 从下到上

（2）justify-content属性（设置主轴子元素排列方法）

flex-start	主轴从头部开始排列【默认值】
flext-end	主轴从尾部开始排列
conter	主轴居中对齐
space-around	主轴平均分配剩余空间
space-between	主轴先两边贴，再平均分配剩余空间

（3）flex-warp属性（主轴子元素是否换行）

nowrap	不换行【默认】
warp	换行

（4）align-items属性（侧轴子元素排列方式）【单行】

stretch	拉伸【默认】
flex-start	侧轴从头部开始排列
flex-end	侧轴从尾部开始排序
center	侧轴居中对齐

（5）align-content属性（侧轴子元素排列方式）【多行】

stretch	拉伸【默认】
flex-start	侧轴从头部开始排列
flex-end	侧轴从尾部开始排序
center	侧轴居中对齐
space-around	侧轴平均分配剩余空间
space-between	侧轴先两边贴，再平均分配剩余空间

（6）flex-flow（复合写法）

flex-flow：（flex-direction） （flex-warp） ；

                                                                                                                                                           

flex布局子项常见属性（写在子元素里）

flex	定义子项目平均剩余空间
align-self	控制子项在侧轴排列方式
order	定义子项排列顺序

（1）flex（定义子项目分配剩余空间的份数）

flex：<number>

默认为0，表示占【主轴】多少份数，还可以用%的方式写

（2）align-self（控制子项在侧轴的排列方式）

①控制一个元素

②可覆盖align-items属性

③默认继承父元素的align-items属性

属性和align-items一样

（3）order（定义子项目的排列顺序）

order：<number>

数值越小,排列越前，默认为0

与z-index不一样，z-index是数值越大越靠前。