CSS知识回顾（11）flex

• 我的博客地址:u.mr90.top

常见布局

1. 流式布局（百分比布局）–重点宽度

• 加最大值或者最小值控制max-width/min-width

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">

• 二倍精灵图

1. 将精灵图缩放为原来的一半

2. 在测算距离

3. 在缩放代码里面的精灵图大小background-size:缩放为原来的一半用px

4. *flex布局

flex布局

• 原理：给父级添加flex属性来控制子盒子
• 弹性布局，任何一个容器都可以指定fiex布局
• 当为父元素设为flex后，float,clear,vertical-align属性将失效
• flex容器，孩子为flex项目（flex item）

flex父级属性

1. flex-diection:设置主轴的方向

• 默认主轴水平向右row,侧轴是水平向下的y轴
• 翻转row-reverse
• column主轴变为y轴

2. justify-content设置主轴上的子元素排列方式flex-start/flex-end/center

• sapce-around平分剩余的空间，space-between先两边贴边再分配剩余的空间
• space-evenly将元素平均分配

3. flex-wrap设置子元素是否换行，默认是不换行的(nowrap)wrap
4. align-items设置侧轴上的子元素的排列方式（单行）flex-start/flex-end/center/stretch
5. align-content出现子项换行的情况，设置侧轴上的子元素的排列方式（多行）,在单行下是没有效果的

• flex-start
• flex-end
• space-between
• space-around
• stretch

6. flex-flow:flex-direction，flex-wrap

flex子项属性

1. flex子项目占的份数 flex=number默认为0从剩余空间分配份数
2. align-self控制某个子项在侧轴上的的排列方式
3. order数值越小越靠前，默认为0

背景渐变

1. 背景线性渐变
   background:-webkit-linear-gradient(left,red,blue)

background: -webkit-gradient(linear,left top,right top,from(#34c2aa),to(#6cd557));
background: linear-gradient(to right,#34c2aa,#6cd557);