2021-03-28

交叉轴的对齐方式：align-items
1.align-items:center;水平垂直方向居中
2.align-items:flex-star居中在顶部
3.align-items:flex-end居中在底
4.align-items：baseline基线对齐
5.align-items：stretch（当项目没给高度，高度为auto时，它会自动撑满容器的高）*
多根轴线的对齐方式：align-content*
1.align-content: flex-start;
2.align-content: flex-end;
3.align-content: center;
4.align-content: space-between;*
oder:指定项目的顺序默认值是0，可以取正负值，值越大越靠后，值越小越靠前flex-grew 放大**
1.如果项目中只出现一次flex-grew，不管取值多少，所有剩余空间都给当前标签
2.如果所有项目中出现多次flex-grew，如：项目四 flex-grew：1;​ 项目五 flex-grew：1;【step1：剩余空间=容器的尺寸-所有项目之和​ 200=600-805step2： flex-grew的份数（此时是4份）step3：求每份的尺寸，公式：剩余空间/份数​ 100=200/4step4：把step3的结果给到每个拥有 flex-grew属性项目的身上注：分配到的份数，是相应 flex-grew的值。即：项目四分的3份，每份50，项目五分得1份，每份50】 flex-shrink 缩小条件：所有项目之和大于容器的尺寸1.所有的项目尺寸之和都会缩小一份的比例比如：5个项目需要缩小200，即每个项目缩小402.如果所有项目中出现多次**flex-shrink ，
如：项目四 flex-shrink：1;​ 项目五flex-shrink：1;【step1：剩余空间=容器的尺寸-所有项目之和​ 200=600-805step2：flex-shrink的份数（此时是4份）step3：求每份的尺寸，公式：剩余空间/份数​ 100=200/4step4：把step3的结果给到每个拥有flex-shrink属性项目的身上注：分配到的份数，是相应 flex-shrink的值。即：项目四分的3份，每份50，即项目四缩小150项目五分得1份，每份50，即项目五缩小50】设置项目交叉轴的对齐方式：align-selfalign-self: flex-end; align-self: flex-start; align-self: center;#### 背景图background–repeat背景图片平铺方式background-repeat:no–repeat不平铺(条件背景图小于标签的尺寸)background-repeat:repeat-x x轴方向平铺 background-repeat: repeat-y y轴方向平铺 background-posotion设置背景图的位置取值：第1个值是x轴的位置或偏移量​ 第2个值是y轴的位置或偏移量​ top、right、bottom、left、center偏移量取值：10px,-10pxbackground-size设置图片背景的大小如果不设置background-size，图片尺寸是原始尺寸（即图片本身的大小）取值：如果取1个值 即代表宽度，高度是原始尺寸​ 如果取2个值，第1个代表宽度，第2个代表高度 background-clip background-originbackground-attachment#### 背景颜色渐变色渐变色background-image1.线性渐变（background-image: linear-gradient）沿着一条线进行渐变2.径向渐变（background-image:radial–gradient) 线性渐变的第一个参数是方向（例子：to right 从·····结束），第二个参数及以后是颜色#### 颜色取值1.关键字：red、skyblue2.十六进制; #+数字或字母+;3.rgb(1,2,3) 每个参数取值范围(0-255)4.rgba(1,2,3,4) 前3个参数取值范围是（0-255），第4个参数的取值（0-1）意思是透明度