flex布局（很方便）

传统布局与flex布局

传统布局（以前的布局方式）兼容性好，布局繁琐（如清除浮动），有局限性即不能在移动端很好的布局；flex弹性布局：操作方便，布局极为简单，移动端应用很广泛，but PC端浏览器支持情况较差，IE11或更低版本，不支持或仅部分支持。建议:1.如果是PC端页面布局，我们还是传统布局。2.如果是移动端或者不考虑兼容性问题的PC端页面布局，我们还是使用flex弹性布局。

flex属性不限行内元素、块级元素，而且用了flex后不分行内元素、块级元素了，也能设置大小、并排显示。所以给父盒子display: flex;后子盒子span可以设置宽高。若子盒子不设置宽高，则块级元素和行内元素都是大小随内容而撑大，当然，受align-items: stretch;拉伸的影响。

flex布局原理

flex是flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器（不限行内元素、块级元素）都可以指定为flex布局。当我们为父盒子设为flex布局以后，子元素的float、clear（因为flex会让盒子显示在一行，就没flota的事了，自然也就没清除浮动的事了）和vertical-align（以前我们常常遗憾margin: 0 auto;是能水平居中而不能垂直居中，flex就可以弥补这个遗憾）属性将失效。

flex布局又叫伸缩布局、弹性布局、伸缩盒布局、弹性盒布局、flex布局

采用Flex布局的元素，称为Flex容器( flex container )，简称"容器"（可见flex多是设在父盒子上的）。它的所有子元素自动成为容器成员，称为Flex项目( flex item)，简称"项目"，项目可以横向排列也可以纵向排列（很灵活）

总结flex布局原理︰就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

常见父项属性

首先给父亲display: flex;以下由6个属性是对父元素设置的：

flex-direction:设置主轴的方向
justify-content:设置主轴上的子元素排列方式
flex-wrap∶设置子元素是否换行
align-items :设置侧轴上的子元素排列方式(单行)
align-content :设置侧轴上的子元素的排列方式(多行)
flex-flow :复合属性，相当于同时设置了flex-direction和flex-wrap

02flex布局

flex-direction属性决定主轴的方向(即项目的排列方向)。注意∶主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的。

属性值	说明
row	默认值，代表从左到右，或者说设置主轴是x轴/行，而x轴是从左向右的
row-reverse	从右到左
column	设置主轴是y轴/列，即从上到下
column-reverse	从下到上

justify-content属性定义了项目在主轴上的对齐方式。由作用可以看出使用这个属性之前一定要确定好主轴是哪个。justify有对齐方式的意思。注意是对齐，不是排序。对齐是盒子都跑到最左最右，排序是盒子之间变换前后顺序

属性值	说明
flex-start	默认值，从主轴头部开始对齐
flex-end	从主轴尾部开始对齐
center	在主轴上居中对齐（如果主轴是x轴则水平居中，如果主轴是y轴则垂直居中)
space-around	平分剩余空间，转化成margin，around有环绕、到处的意思
space-between	先两边贴边，再平分剩余空间(重要)，转化成margin
stretch	我没看出有啥用，不理会。

.fa { display: flex; width: 500px; height: 400px; background-color: pink;
    flex-direction: row; justify-content: space-around;
}    
.fa span {
    width: 100px; height: 100px; margin-right: 5px; background-color: purple;
}
    </style> </head> <body>
<div class="fa"> <span>1</span> <span>2</span> <span>3</span> </div>

对于space-around来说，剩余空间就是下图，当盒子默认的从左向右排列时，余下的空间就是剩余空间：

有时候我们有下图这样的需求，我希望好几个盒子，头盒子紧贴左边，即margin-left: 0;尾盒子紧贴右边即margin-right: 0;就可以用display: flex; justify-content: space-between;

02flex布局

上面代码中父盒子宽500px，每个子盒子宽100px，如果我放了6个这样的span子盒子，在以前的传统布局方式中会因为一行放不下而换行显示。但是看如下稍微修改了的代码：

.fa { display: flex; width: 500px; height: 400px; background-color: pink;
    flex-direction: row; justify-content: space-around;
}    
.fa span {
    width: 100px; height: 100px; margin-right: 5px; background-color: purple;
}
    </style> </head> <body>
<div class="fa"> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>6</span> </div>

02flex布局

解读：1的左边没有空隙是因为剩余空间是0，所以每个盒子分到0px。并没有换行显示，看来flex布局当一行显示不下时默认不换行，反而会缩小盒子以恰好放得下所有盒子。

默认情况下，项目都排在一条线(又称”轴线”)上。

属性值	说明
nowrap	默认值，不换行。宁愿缩小盒子也不换行。
wrap	换行

如果给上面代码的.fa加上flex-wrap: wrap;就会显示：

02flex布局

该属性是控制子项在侧轴上的排列方式，在子项为单行的时候使用。单行的意思是子盒子从主轴方向上看只有一行。既然只有一行了，align-items 又是设置侧轴上的子元素排列方式，自然没有space-around和space-between这种作用是排列多行的属性值了。

属性值	说明
flex-start	从上到下。用法和作用与justify-content仅不一样在前者是控制子项在侧轴上的排列方式，后者是控制子项在主轴上的排列方式
flex-end	从下到上
center	挤在一起居中（垂直居中)
stretch	拉伸（默认值)，不常用。所以可以看到没指定高度 / 宽度的span / div 在侧轴上是拉伸的，当然，指定了高度 / 宽度后高度 / 宽度就按height / width来。

上面我们有个display: flex; flex-direction: row; justify-content: center;让子盒子可以紧贴左边地垂直对齐，但是我们想在水平和垂直上都居中可以吗？。代码如下：

.fa { display: flex; width: 500px; height: 400px; background-color: pink;
    flex-direction: row; justify-content: center; align-items: center;
}
.fa span { width: 100px; height: 100px; margin-right: 5px; background-color: purple;}
    </style> </head> <body>
<div class="fa"> <span>1</span> <span>2</span> <span>3</span> </div>

02flex布局

如果我们把上面代码的子盒子高度去掉，父盒子加上align-items: stretch;就显示如下：

02flex布局

虽然align-items和justify-content很像，但是它适用于子项只有一行的设定导致它没有space-around、space-between的属性，所以它不能做如下图，两行项目，每行按space-around的方式占位，也不能按space-between的方式贴满上下边缘在平分剩余空间的方式占位

02flex布局

设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况(即子项是多行的），在单行下是没有效果的。可取值和justify-content是一样的：

属性值	说明
flex-start	在侧轴的头部开始排列问题来了，如果项目不指定height & width，也不取stretch值，项目会怎么显示？：项目不论div / span默认宽高都是随内容撑大，所以会这样：
flex-end	在侧轴的尾部开始排列
center	在侧轴中间显示
space-around	子项在侧轴平分剩余空间
space-between	子项在侧轴先分布在两头，再平分剩余空间
stretch	默认值，设置子项元素高度平分父元素高度，除非项目被指定高度了。

总结就是布局侧轴上时，单行找align-items，多行找align-content。单行的意思是子盒子从主轴方向上看只有一行。例如下图，flex-direction: column;，没有红框就是单行，只不过主轴是y轴，从主轴上看只有一行，如果有红框就是换行的多行。

02flex布局

flex-flow属性是flex-direction和flex-wrap属性的复合属性。例如flex-direction: row; flex-wrap: wrap;等价于flex-flow : row wrap;

flex布局子项常见属性

同样需要父盒子开启display: flex;

flex属性定义子项目分配主轴方向上的剩余空间，转化成自己的宽度 / 高度，用flex来表示占多少份数。该属性永远优先于前端师设置的width / height 属性，但低于自带width / height的图片（例如图片720px宽，没特意设width，且图片在width375px的容器中独占一行，设它flex: 1;或者flex: 50%;最终图片显示为720px宽）。

.item {
    flex: <number>; /* 默认值是0。其实除了数字还可以是百分比，100%是父亲的宽 / 高 */
}

1.我想做出如下：

02flex布局

给ul以display: flex;为了换两行想给li以width: 20%;但那是百分比布局的手法，我们flex布局可以给li以flex: 20%;

2.需求：下图百分比流式布局案例中，左右两个组件不随屏幕宽度而缩放，搜索框则随屏幕宽度自适应，以前是左右小组件用position: absolute;，搜索框用margin: 0 5px;现在可以用flex轻松实现。

.fa { display: flex; width: 500px; height: 100px; 
    background-color: pink; flex-direction: row;}
.fa span:nth-child(1) { width: 50px; background-color: purple; }
.fa span:nth-child(2) { background-color: red; flex: 1; }
.fa span:nth-child(3) { width: 50px; background-color: green; }
    </style> </head> <body>
    <div class="fa"> <span>菜单栏</span> <span>搜索框</span> <span>登录</span> </div>

02flex布局

解读：如何理解这里的flex: 1;？：当排完紫框和绿框后一行剩下的距离就是剩余空间，而红框占有一份，而总占有份数为1，即红框占有1/1=100%。

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch（因为align-items默认值是stretch）。例如下图实例，如果给父盒子加上align-items: flex-end;会让三个子盒子全下去，如果我只是想要第三个盒子下去，可以不给父盒子align-items: flex-end;，给第三个子盒子单独加align-self: flex-end;

02flex布局

属性	说明
auto	默认值，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch（因为align-items默认值是stretch）
flex-start	效果同align-items的flex-start
flex-end	效果同align-items的flex-end
center	效果同align-items的center
baseline	不晓得
stretch	效果同align-items的stretch
inherit	不晓得

我有下图，给容器加了flex-direction: row; align-items: center;此时显示如下图：

02flex布局

单独给第一个项目align-self: flex-start;变成了：

发现align-self让某个小组件单独行动并不会乱了大局。

数值越小，排列越靠前，默认为0，可取负值。注意:和z-index不一样。例如上图右例代码，如果你想让2排在1前面，你可以

section > div:nth-child(2) { order: -1; }

transform: 某;是css3的写法，如果需要兼容老版本，可以填上-webkit-transform: 某;，注意让-webkit在前，另一个在后，这样当-webkit失效还可以生效不带-webkit。
还有，公司里二倍图，美工会把图片名以@2x结尾例如icon_v7.12@2x.png，代表二倍图。
老师在写这个精灵图的时候，怎么给五个盒子设置不一样的呢？：给盒子分别取类名sprite1、sprite2、...sprite5.
```
[class^="sprite"] {
    background: url();等公共属性
}
.sprite1 { background-position: 0 0; }
.sprite2 { background-position: 0 -21px; }
...
```
还可以用js的for循环来设置div.style.backgroundPosition，代码更短

比如制作三个并排盒子且各占1/3，百分比布局会让每个盒子width: 33.3%;flex布局会给每个子盒子写：flex: 1;

C3线性渐变

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