Flex布局父项常用属性总结

Flex布局常见于各个网站之中，现总结几个常用布局属性，方便以后使用

1.flex-direction

2.justify-content

该属性定义了项目在主轴上的对齐方式

注意：使用前必须确认主轴是哪一个

属性值	说明
flex-start	默认值 从头部开始 如果主轴是x，则从左到右
flex-end	从尾部开始排列
center	在主轴居中对齐（主轴是x 水平居中）
space-around	平分剩余空间
space-between	两边贴边，再平分剩余空间

3.flex-wrap

默认情况下，项目都排在一条线上。flex-wrap属性定义，flex布局中默认是不换行的

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

4.align-items

该属性是控制子项在侧轴（默认y轴）上的排列方式，在子项为单项（单行）的时候使用

属性值	说明
flex-start	默认值，从上到下
flex-end	从下到上
center	挤在一起居中（垂直居中）
stretch	拉伸（子盒子不要给高度）

5.align-content

设置侧轴上的子元素排列方式，并且只能用于子项出现换行的情况（多行），单行下没有效果

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

单行用align-items，多行用align-content

6.flex-flow

是flex-direction和flex-wrap属性的复合属性

例如：flex-flow:row wrap