flex布局知识点

Flex布局常用属性

1、在父级盒子设置display属性为flex

.box{
	display:flex
}

2、父级属性

1)、 flex-direction:设置主轴方向，默认为X轴
属性分别为： row 默认值 从左到右 （默认值）
row-reverse 从右到左
column 从上到下
column 从下到上
2）、justify-content:设置主轴上的子元素排列方式
属性分别为：flex-start:默认从头部开始排列 （默认值）
flex-end 从尾部开始排列
center:从主轴居中位置排列
space-around：平分剩余空间
space-between:先两边 在评分剩余空间（非常重要）
3）、flex-wrap:设置子元素是否换行：默认为nowrap
属性分别为：wrap 换行
nowrap 不换行（默认值）
4）、align-content:设置侧轴上的子元素的排列方式（多行）
属性分别为：flex-start 默认值 从上到下排列
flex-end 从主轴的尾部开始排列
center 从中间开始向两边排列（垂直居中）
space-around：子元素在侧轴平分剩余空间
space-between:子元素在侧轴先两边 在平分剩余空间（非常重要）
stretch 子元素平分腹肌元素的高度
5）、align-items:设置侧轴上的子元素排列方式（单行）
属性分别为：flex-start 默认值 从上到下排列
flex-end 从主轴的尾部开始排列
center 从中间开始向两边排列（垂直居中）
stretch 拉伸（用的比较少）
6）、flex-flow:复合属性，相当于同事设置了flex-direction和flex-wrap (一般不用)

子项常见属性

1、flex 子项占据的份数 默认为0
2、align-self:控制子项自己在侧轴的排列方式
属性为：
3、order:子项的排列顺序