flex布局常见父项属性

1.常见的父项属性（6个） 对父元素设置

 1.flex-direction :设置主轴的方向
 2.justify-content： 设置主轴上的子元素排列方式
 3.flex-wrap：设置子元素是否换行
 4.align-content：设置侧轴上的子元素的排列方式 （多行）
 5.align-items：设置侧轴上的子元素排列方式（单行）
 6.flex-flow：复合属性，相当于同时设置了flex-ditection和flex-wrap

1.1.flex-direction 设置主轴方向

1.主轴和侧轴 ，默认水平向右👉 的x轴是主轴‘

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

1.2.justify-content

注意⚠️：使用前，确定那个是主轴

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

1.3.flex-warp 设置子元素是否换行

默认情况下，项目排再一条直线上，flex布局默认不换行

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

1.4.align-items 设置侧轴上的子元素排列方式（单行）

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

属性值	说明
flex-start	从上到下
flex-end	从下到上
center	挤到一起居中（垂直居中）
stretch	拉伸（默认值）

1.5.align-content 设置侧轴上的子元素排列方式（多行）

设置子项在侧轴上的排列方式，并且只能在用于子项出现"换行"的情况，在单行下无效

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

1.6.flex-flow

是flex-direction和flex-wrap属性的复合属性
flex-flow：row wrap

2.flex布局子项常见属性

2.1.flex属性

flex属性是定义子项分配剩余空间，用flex来表示占多少份数
举个🌰：
.item{
	flex:1;  默认是0
}

2.2.align-self 控制子项自己在侧轴上的排列方式

	1. align-self 属于允许单个项目，有与其他项目不一样的对齐方式，可覆盖align-items属性
	2. 默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
	举个🌰：
	span:nth--child(2){
		//设置自己在侧轴上的排列方式
		align-self:flex-end；
	}

2.3.order 属性定义项目的排列顺序

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

注意⚠️：和z-index不一样

补充：背景线性渐变

background:liner-gradient(起始方向，颜色1，颜色2，.......)
background:-webkit-liner-gradient(left,red,blue)
background:-webkit-liner-gradient(left,top,red,blue)

注意⚠️：

背景渐变必须添加浏览器私有前缀
其实方向可能是方位名词或度数，省略则为top