CSS3 入门详解（二）

jiezi

6 年前

11. 动画
动画是 CSS3 中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
11.1 如何实现动画
必要元素：

a、通过 @keyframes 指定动画序列；
b、通过百分比将动画序列分割成多个节点；
c、在各节点中分别定义各属性
d、通过 animation 将动画应用于相应元素；

示例代码：两种定义动画的方式
<style>
/* move 是定义的动画名 */
@keyframes move {
0% {
transform: translateX(0px);
width: 200px;
height: 200px;
}

40% {
width: 300px;
height: 300px;
}

80% {
width: 200px;
height: 200px;
transform: translateX(100px);
}

100% {
transform: translateX(0px);
width: 200px;
height: 200px;
}
}

/* 定义动画集 */
@keyframes move1 {
from {
/* 动画的开始状态 */
/* 位置开始状态 */
transform: translateX(0px);
}
to {
/* 动画的结束状态 */
/* 位置结束状态 */
transform: translateX(300px);
}
}

.box {
width: 200px;
height: 200px;
background-color: pink;

/* 调用动画集动画名持续时间执行速度 */
animation: move 5s linear;
}
</style>
11.2 动画关键属性
关键属性

a、animation-name 设置动画序列名称
b、animation-duration 动画持续时间
c、animation-delay 动画延时时间
d、animation-timing-function 动画执行速度，linear、ease 等
e、animation-play-state 动画播放状态，running、paused 等
f、animation-direction 动画逆播，alternate 等
g、animation-fill-mode 动画执行完毕后状态，forwards、backwards 等
h、animation-iteration-count 动画执行次数，inifinate 等
i、steps(60) 表示动画分成 60 步完成

参数值的顺序：
关于几个值，除了名字，动画时间，延时有严格顺序要求其它随意。
示例代码：
<style type=”text/css”>
.box {
width: 200px;
height: 200px;
background-color: pink;
/* 调用动画集 */
animation: move 5s linear;
}

/* 定义动画集 */
@keyframes move {
0% {
/* 位置开始状态 */
transform: translateX(0px);
/* 动画的开始状态 */
width: 100px;
height: 100px;
}
40% {
width: 150px;
height: 150px;
background: orange；
}
80% {
width: 200px;
height: 200px;
background: cyan;
transform: translateX(100px);
}
100% {
/* 位置结束状态 */
transform: translateX(0px);
/* 动画的结束状态 */
width: 100px;
height: 100px;
background: pink;
}
}
</style>

<div class=”box”></div>
效果图：

11.3 动画案例
1、全屏切换
定义三个动画集，当点击 a 标签的时候，通过他的锚点触发对应的动画集。
<style type=”text/css”>
* {
margin: 0;
padding: 0;
}
html,body {
width: 100%;
height: 100%;
}

.box {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}

.box>div{
width: 100%;
height: 100%;
position: absolute;
background-size: cover;
}

.one {
background: url(img/bg6.jpg) no-repeat;

}

.two {
background: url(img/bg7.jpg) no-repeat;
}

.three {
background: url(img/bg8.jpg) no-repeat;
}

.box .numbers {
width: 150px;
height: 40px;
left: 50%;
margin-left: -75px;
bottom: 30px;
z-index: 4;
}

.box .numbers a {
width: 40px;
height: 40px;
display: block;
line-height: 40px;
text-align: center;
text-decoration: none;
color: #777;
background-color: rgba(255,255,255,.8);
border-radius: 50%;
float: left;
margin: 0 5px;
}
.one:target {
animation: move 1s linear;
z-index: 1;

}

.two:target {
animation: rotate 1s linear;
z-index: 1;
}

.three:target {
animation: scale 1s linear;
z-index: 1;
}

@keyframes move {
from {
transform: translateX(-100%);
}

to {
transform: translateX(0px);
}
}
@keyframes rotate {
from {
transform: scale(0) rotateZ(0deg);
}

to {
transform: scale(1) rotateZ(360deg);
}
}
@keyframes scale {
from {
transform: scale(0);
}

to {
transform: scale(1);
}
}
</style>

<div class=”numbers”>
<a href=”#one”>1</a>
<a href=”#two”>2</a>
<a href=”#three”>3</a>
</div>
</div>
效果图：

2、大海波涛
波浪其实是两张图片，执行的是同一组动画，只需要在第二张图片执行动画的时候，让它延迟 1s 执行，就可以出现“波动”的感觉。
<style type=”text/css”>
* {
margin: 0;
padding: 0;
}

html,body {
width: 100%;
height: 100%;
}
.box {
width: 100%;
height: 100%;
background-color: #0EA9B1;
position: relative;
overflow: hidden;
}

.box img {
position: absolute;
width: 100%;
bottom: 0;
}

.sun {
width: 80px;
height: 80px;
background-color: #fff;
border-radius: 50%;
position: absolute;
left: 100px;
top: 50px;
}
.sun:after {
content: “”;
display: block;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: rgba(255,255,255,.6);
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
animation: scale 1s linear infinite alternate;
}

.sun:before {
content: “”;
display: block;
width: 120px;
height: 120px;
border-radius: 50%;
background-color: rgba(255,255,255,.4);
position: absolute;
left: 50%;
top: 50%;
margin-left: -60px;
margin-top: -60px;
animation: scale 2s 1s linear infinite alternate;
}

@keyframes scale {
from {
transform: scale(1);
}

to {
transform: scale(1.2);
}
}

@keyframes move{
from {
bottom: 0px;
}

to {
bottom: -60px;
}
}

img:nth-child(2){
animation: move 1s linear infinite alternate;
}

img:nth-child(3) {
animation: move 2s 1s linear infinite alternate;
}
</style>

<div class=”box”>
<div class=”sun”></div>
<img src=”img/1.png” alt=””>
<img src=”img/2.png” alt=””>
</div>
效果图：

3、宇宙
通过定位确定各“星球”的位置，再对每个星球设定单独的动画，形成联动的各大星球。
<style type=”text/css”>
* {
margin: 0;
padding: 0;
}
html,body {
width: 100%;
height: 100%;
background: url(img/bg.jpg) no-repeat;
background-size: cover;
position: relative;
}
.box {
width: 600px;
height: 600px;
border: 1px solid #ccc;
border-radius: 50%;
position: absolute;
left: 50%;
margin-left: -300px;
top: 50%;
margin-top: -300px;
}

.sun {
position: absolute;
width: 50px;
height: 50px;
background-color: orange;
border-radius: 50%;
margin-left: -25px;
left: 50%;
margin-top: -25px;
top: 50%;

box-shadow: 0px 0px 50px orange;
}

.lin1 {
width: 100px;
height: 100px;
border: 1px solid #ccc;
border-radius: 50%;
margin-left: -50px;
margin-top: -50px;
animation: rotate 10s linear infinite;
}

.lin1:after {
content: “”;
width: 20px;
height: 20px;
display: block;
border-radius: 50%;
background-color: orange;
position: absolute;
left: -2px;
top: 10px;
}

.public {
position: absolute;
left: 50%;
top: 50%;
}

@keyframes rotate {
from {
transform: rotateZ(0deg);
}

to {
transform: rotateZ(360deg);
}
}

.lin2 {
width: 150px;
height: 150px;
border: 1px solid #ccc;
border-radius: 50%;
margin-left: -75px;
margin-top: -75px;

animation: rotate 5s linear infinite;
}
.lin2:after {
content: “”;
width: 10px;
height: 10px;
background-color: blue;
display: block;
border-radius: 50%;
position: absolute;
left: 25px;
top: 10px;
}

.lin3 {
width: 230px;
height: 230px;
border: 1px solid #ccc;
border-radius: 50%;
margin-left: -115px;
margin-top: -115px;
animation: rotate 10s linear infinite;
}
.lin3 span {
width: 20px;
height: 20px;
display: block;
background-color: green;
border-radius: 50%;
position: absolute;
left: 50px;
animation: rotate 5s linear infinite;
}
.lin3 span b {
width: 10px;
height: 10px;
background-color: pink;
display: block;
border-radius: 50%;
position: absolute;
left: 25px;

}

.lin4 {
width: 332px;
height: 332px;
border: 1px solid #ccc;
background: url(img/asteroids_meteorids.png) no-repeat;
border-radius: 50%;
margin-left: -161px;
margin-top: -161px;
animation: rotate 15s linear infinite;
}

.lin4:after {
content: “”;
display: block;
width: 10px;
height: 10px;
background-color: red;
border-radius: 50%;
position: absolute;
left: 120px;
}

.line5 {
width: 450px;
height: 450px;
border: 1px solid #ccc;
border-radius: 50%;
margin-left: -220px;
margin-top: -220px;
animation: rotate 10s linear infinite;
}

.line5 span {
width: 30px;
height: 30px;
background-color: blue;
border-radius: 50%;
display: block;
position: absolute;
left: 120px;
}

.line5 span b {
display: block;
width: 40px;
height: 40px;
border: 5px solid #ccc;
border-radius: 50%;
transform: skew(45deg);
position: absolute;
left: -6px;
top: -10px;
}
</style>

</div>
效果图：

4、无缝滚动轮播
结构上与普通的轮播图没有什么区别，定义一个盒子的宽度，宽度为八张图片的总宽度，定义一个动画集，10s 内将 ul 从 0 的位置移动到盒子的宽度，此时动画集结束，应该是跳到 0 的位置，循环此动画就会形成无缝滚动。之所以 ul 下的 li 定义的是十四张图片，是因为，一开始的时候图片从零的位置向右移动时，如果只有七张图片的时候，右边是空白的，只有完全到达盒子宽的时候，整个图片才会显示完整，用户体验很差，所以需要用到障眼法，就是用 14 张图片。
<style type=”text/css”>

* {
margin: 0;
padding: 0;
list-style: none;
}

.box {
width: 882px;
height: 84px;
border: 1px solid #ccc;
margin: 50px auto;
overflow: hidden;
}
ul {
width: 1764px;
height: 84px;
float: right;
animation: move 10s linear infinite;
}
li {
float: left;
}

ul:hover {
animation-play-state: paused;
}

@keyframes move {
from {
transform: translateX(0px);
}

to {
transform: translateX(882px);
}
}
</style>

<div class=”box”>
<ul>
<li><img src=”img/1.jpg” alt=””></li>
<li><img src=”img/2.jpg” alt=””></li>
<li><img src=”img/3.jpg” alt=””></li>
<li><img src=”img/4.jpg” alt=””></li>
<li><img src=”img/5.jpg” alt=””></li>
<li><img src=”img/6.jpg” alt=””></li>
<li><img src=”img/7.jpg” alt=””></li>
<li><img src=”img/1.jpg” alt=””></li>
<li><img src=”img/2.jpg” alt=””></li>
<li><img src=”img/3.jpg” alt=””></li>
<li><img src=”img/4.jpg” alt=””></li>
<li><img src=”img/5.jpg” alt=””></li>
<li><img src=”img/6.jpg” alt=””></li>
<li><img src=”img/7.jpg” alt=””></li>
</ul>
</div>
效果图：

5、进度条
前面已经接触了一个 demo，只不过是一个静态的进度条，现在我们通过动画，让他动起来。
<style type=”text/css”>
* {
margin: 0;
padding: 0;
}

html,body {
width: 100%;
height: 100%;
background-color: #ccc;
}

.line {
width: 980px;
height: 40px;
margin: 50px auto;
border-radius: 10px;

background-image: linear-gradient(
135deg,
#fff 25%,
#000 25%,
#000 50%,
#fff 50%,
#fff 75%,
#000 75%,
#000
);
background-size: 40px 40px;
animation: move 2s linear infinite;
}

@keyframes move {
from {
background-position: 0px;
}

to {
background-position: 40px;
}
}

</style>

效果图：

6、时钟案例
本时钟案例，主要是依赖 CSS3 中动画以及旋转的概念实现的。
<style type=”text/css”>

* {
margin: 0;
padding: 0;
}
body{
background: #ccc;
}
.box {
width: 300px;
height: 300px;
border: 1px solid #fff;
margin: 100px auto;
border-radius: 50%;
position: relative;
}

.line {
position: absolute;
left: 50%;
margin-left: -1px;
height: 100%;
width: 2px;
background-color: #fff;
}
.line:nth-child(1){

}
/* 设置时刻位置的刻度线 */
.line:nth-child(2) {
transform: rotateZ(30deg);
}

.line:nth-child(3) {
transform: rotateZ(60deg);
}

.line:nth-child(4) {
transform: rotateZ(90deg);
}

.line:nth-child(5) {
transform: rotateZ(120deg);
}

.line:nth-child(6) {
transform: rotateZ(-30deg);
}

.cover {
position: absolute;
left: 50%;
top: 50%;
margin-left: -140px;
margin-top: -140px;
width: 280px;
height: 280px;
background-color: #fff;
border-radius: 50%;
}

/* 设置时针转完一圈所要用的时间为 43200s */
.h{
width: 6px;
height: 100px;
background-color: #000;
position: absolute;
left: 50%;
top: 40px;
margin-left: -3px;
animation: rotate 43200s linear infinite;
}
/* 设置分针转完一圈所要用的时间为 3600s */
.m {
width: 4px;
height: 120px;
background-color: #000;
position: absolute;
left: 50%;
top: 20px;
margin-left: -2px;
transform-origin: bottom;
animation: rotate 3600s linear infinite;
}
/* 设置秒针转完一圈所要用的时间为 60s */
/* steps(60) 表示该动画需要 60 步完成 */
.s {
width: 2px;
height: 130px;
background-color: orange;
position: absolute;
left: 50%;
top: 10px;
margin-left: -1px;
transform-origin: bottom;
animation: rotate 60s steps(60) infinite;
}

.dotted {
width: 10px;
height: 10px;
background-color: #000;
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
margin-left: -5px;
margin-top: -5px;
}

/* 定义旋转角度动画，从 0 度旋转到 360 度 */
@keyframes rotate {
from {
transform: rotateZ(0deg);
}

to {
transform: rotateZ(360deg);
}
}

</style>

<div class=”box”>
<div class=”line”></div>
<div class=”line”></div>
<div class=”line”></div>
<div class=”line”></div>
<div class=”line”></div>
<div class=”line”></div>
<div class=”cover”>
<div class=”h”></div>
<div class=”m”></div>
<div class=”s”></div>
<div class=”dotted”></div>
</div>
</div>
效果图：

7、魔方案例
<style type=”text/css”>
* {
margin: 0;
padding: 0;
list-style: none;
}

.box {
width: 400px;
height: 400px;
margin: 150px auto;

/* perspective: 1000px; */

transform-style: preserve-3d;

animation: rotate 5s linear infinite alternate;
}

.box>div {
position: absolute;
width: 100%;
height: 100%;
}

.left {
background-color: transparent;
transform: rotateY(-90deg) translateZ(200px);
}

.right {
background-color: transparent;
transform: rotateY(90deg) translateZ(200px);
}

.top {
background-color: transparent;
transform: rotateX(90deg) translateZ(200px);
}

.bottom {
background-color: transparent;
transform: rotateX(-90deg) translateZ(200px);
}

.before {
background-color: transparent;
transform: translateZ(200px);

}

.back {
transform: translateZ(-200px);
background-color: transparent;
}

@keyframes rotate {
0% {
transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
}

50% {
transform: rotateY(30deg) rotateX(60deg) rotateZ(45deg);
}

75% {
transform: rotateY(80deg) rotateX(-60deg) rotateZ(-45deg);
}

100% {
transform: rotateY(-45deg) rotateX(50deg) rotateZ(-35deg);
}
}

li {
width: 120px;
height: 120px;
background-color: green;
float: left;
margin-left: 10px;
margin-top: 10px;
text-align: center;
line-height: 120px;
font-size: 50px;
border-radius: 10px;
}

.left li {
background-color: orange;
}

.right li {
background-color: pink;
}

.top li {
background-color: red;
}

.bottom li {
background-color: yellow;
}

.back li {
background-color: orangered;
}
</style>

<div class=”box”>
<div class=”left”>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
<div class=”right”>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
<div class=”top”>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
<div class=”bottom”>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
<div class=”before”>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
<div class=”back”>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
</div>
效果图：

12. 伸缩布局
本章节摘自阮一峰老师的《Flex 布局教程》

CSS3 在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。伸缩布局也叫弹性布局或者 flex 布局。
12.1 什么是伸缩布局

Flex 是 Flexible Box 的缩写，意为 ” 弹性布局 ”，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局。
.box{
display: flex;
}
行内元素也可以使用 Flex 布局。
.box{
display: inline-flex;
}
Webkit 内核的浏览器，必须加上 -webkit 前缀。
.box{
display: -webkit-flex; /* Safari */
display: flex;
}
注意，设为 Flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。
12.2 基本概念
浏览器兼容性：

学习几个新概念：

主轴：Flex 容器的主轴主要用来配置 Flex 项目，默认是水平方向
侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的
方向：默认主轴从左向右，侧轴默认从上到下
主轴和侧轴并不是固定不变的，通过 flex-direction 可以互换。

12.3 flex-direction 属性

flex-direction 属性决定主轴的方向（即项目的排列方向）。
.box {flex-direction: row | row-reverse | column | column-reverse;}
参数说明：

row（默认值）：主轴为水平方向，起点在左端。

row-reverse：主轴为水平方向，起点在右端。

column：主轴为垂直方向，起点在上沿。

column-reverse：主轴为垂直方向，起点在下沿。

<div class=”block”>
<h4>flex-direction: row 水平向右 </h4>
<div class=”box box-1-1″>
<div class=”box-item”>1</div>
<div class=”box-item”>2</div>
<div class=”box-item”>3</div>
<div class=”box-item”>4</div>
</div>
</div>
<div class=”block”>
<h4>flex-direction: row-reverse 水平向左 </h4>
<div class=”box box-1-2″>
<div class=”box-item”>1</div>
<div class=”box-item”>2</div>
<div class=”box-item”>3</div>
<div class=”box-item”>4</div>
</div>
</div>
<div class=”block”>
<h4>flex-direction: column 垂直向下 </h4>
<div class=”box box-1-3″>
<div class=”box-item”>1</div>
<div class=”box-item”>2</div>
<div class=”box-item”>3</div>
<div class=”box-item”>4</div>
</div>
</div>
<div class=”block”>
<h4>flex-direction: column-reverse 垂直向上 </h4>
<div class=”box box-1-4″>
<div class=”box-item”>1</div>
<div class=”box-item”>2</div>
<div class=”box-item”>3</div>
<div class=”box-item”>4</div>
</div>
</div>
效果图：

12.4 flex-wrap 属性
默认情况下，项目都排在一条线（又称 ” 轴线 ”）上。flex-wrap 属性定义，如果一条轴线排不下，如何换行。
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
参数说明：

nowrap（默认）：不换行，宽度自动适应；

wrap：换行，第一行在上方；

wrap-reverse：换行，第一行在下方

<div class=”block”>
<h4>nowrap（默认）：不换行。</h4>
<div class=”box box-2-1″>
<div class=”box-item”>1</div>
<div class=”box-item”>2</div>
<div class=”box-item”>3</div>
<div class=”box-item”>4</div>
<div class=”box-item”>5</div>
<div class=”box-item”>6</div>
<div class=”box-item”>7</div>
</div>
</div>
<div class=”block”>
<h4>wrap：换行，第一行在上方。</h4>
<div class=”box box-2-2″>
<div class=”box-item”>1</div>
<div class=”box-item”>2</div>
<div class=”box-item”>3</div>
<div class=”box-item”>4</div>
<div class=”box-item”>5</div>
<div class=”box-item”>6</div>
<div class=”box-item”>7</div>
</div>
</div>
<div class=”block”>
<h4>wrap-reverse：换行，第一行在下方。</h4>
<div class=”box box-2-3″>
<div class=”box-item”>1</div>
<div class=”box-item”>2</div>
<div class=”box-item”>3</div>
<div class=”box-item”>4</div>
<div class=”box-item”>5</div>
<div class=”box-item”>6</div>
<div class=”box-item”>7</div>
</div>
</div>
效果图：

12.5 flex-flow 属性

flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap。
.box {
flex-flow: <flex-direction> || <flex-wrap>;
}
示例代码：
<style>
.block{
width: 100%;
border-radius: 15px;
background: rgba(158,158,158,0.15);
padding: 20px;
box-sizing: border-box;
margin-bottom: 20px;
}
.box{
background: #fff;
display: flex;
margin: 0 0 55px;
}
.box-item {
width: 150px;
height: 150px;
line-height: 150px;
vertical-align: middle;
margin: 5px;
background-color: #ffd200;
font-size: 100px;
color: white;
text-align: center;
}
.box-3{
flex-flow: row wrap;
}
</style>

<div class=”block”>
<h4>row nowrap（默认）：不换行。</h4>
<div class=”box box-3″>
<div class=”box-item”>1</div>
<div class=”box-item”>2</div>
<div class=”box-item”>3</div>
<div class=”box-item”>4</div>
<div class=”box-item”>5</div>
<div class=”box-item”>6</div>
<div class=”box-item”>7</div>
</div>
</div>
效果图：

12.6 justify-content 属性

justify-content 属性定义了项目在主轴上的对齐方式。
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
参数说明：

flex-start：（默认值）：左对齐

flex-end：右对齐

center：居中

space-between：两端对齐，项目之间的间隔都相等。

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

示例代码：
<style>
.block{
width: 100%;
border-radius: 15px;
background: rgba(158,158,158,0.15);
padding: 20px;
box-sizing: border-box;
margin-bottom: 20px;
}
.box{
background: #fff;
display: flex;
margin: 0 0 55px;
}
.box-item {
width: 150px;
height: 150px;
line-height: 150px;
vertical-align: middle;
margin: 5px;
background-color: #ffd200;
font-size: 100px;
color: white;
text-align: center;
}
.box-4-1{
justify-content:flex-start;
}
.box-4-2{
justify-content:flex-end;
}
.box-4-3{
justify-content:center;
}
.box-4-4{
justify-content:space-between;
}
.box-4-5{
justify-content:space-around;
}
</style>

<div class=”block”>
<h4>flex-start（默认值）：左对齐 </h4>
<div class=”box box-4-1″>
<div class=”box-item”>1</div>
<div class=”box-item”>2</div>
<div class=”box-item”>3</div>
<div class=”box-item”>4</div>
</div>
</div>
<div class=”block”>
<h4>flex-end：右对齐 </h4>
<div class=”box box-4-2″>
<div class=”box-item”>1</div>
<div class=”box-item”>2</div>
<div class=”box-item”>3</div>
<div class=”box-item”>4</div>
</div>
</div>
<div class=”block”>
<h4>center：居中 </h4>
<div class=”box box-4-3″>
<div class=”box-item”>1</div>
<div class=”box-item”>2</div>
<div class=”box-item”>3</div>
<div class=”box-item”>4</div>
</div>
</div>
<div class=”block”>
<h4>space-between：两端对齐，项目之间的间隔都相等。</h4>
<div class=”box box-4-4″>
<div class=”box-item”>1</div>
<div class=”box-item”>2</div>
<div class=”box-item”>3</div>
<div class=”box-item”>4</div>
</div>
</div>
<div class=”block”>
<h4>space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。</h4>
<div class=”box box-4-5″>
<div class=”box-item”>1</div>
<div class=”box-item”>2</div>
<div class=”box-item”>3</div>
<div class=”box-item”>4</div>
</div>
</div>
效果图：

12.7 align-items 属性

align-items 属性定义项目在交叉轴上如何对齐。
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
参数说明：

flex-start：交叉轴的起点对齐。

flex-end：交叉轴的终点对齐。

center：交叉轴的中点对齐。

baseline: 项目的第一行文字的基线对齐。

stretch（默认值）：如果项目未设置高度或设为 auto，将占满整个容器的高度。

示例代码：
<style>
.block{
width: 100%;
border-radius: 15px;
background: rgba(158,158,158,0.15);
padding: 20px;
box-sizing: border-box;
margin-bottom: 20px;
}
.box{
background: #fff;
display: flex;
margin: 0 0 55px;
}
.box-item {
width: 150px;
height: 150px;
line-height: 150px;
vertical-align: middle;
margin: 5px;
background-color: #ffd200;
font-size: 100px;
color: white;
text-align: center;
}
.item-tall {
height: 400px;
line-height: 400px;
}
.box-5-1 {
align-items: flex-start;
}
.box-5-2 {
align-items: flex-end;
}
.box-5-3 {
align-items: center;
}
.box-5-4{
align-items: baseline;
}
.box-5-4 .box-item{
font-size: 88px;
line-height: initial;
text-decoration: underline;
}
.box-5-4 .item-tall{
font-size: 122px;
line-height: initial;
}
.box-5-5 {
align-items: stretch;
}
.box-5-5 .box-item {
height: auto;
}
</style>

<div class=”block”>
<h4>flex-start：交叉轴的起点对齐。</h4>
<div class=”box box-5-1″>
<div class=”box-item”>1</div>
<div class=”box-item item-tall”>2</div>
<div class=”box-item”>3</div>
<div class=”box-item item-tall”>4</div>
</div>
</div>
<div class=”block”>
<h4>flex-end：交叉轴的终点对齐。</h4>
<div class=”box box-5-2″>
<div class=”box-item”>1</div>
<div class=”box-item item-tall”>2</div>
<div class=”box-item”>3</div>
<div class=”box-item item-tall”>4</div>
</div>
</div>
<div class=”block”>
<h4>center：交叉轴的中点对齐。</h4>
<div class=”box box-5-3″>
<div class=”box-item”>1</div>
<div class=”box-item item-tall”>2</div>
<div class=”box-item”>3</div>
<div class=”box-item item-tall”>4</div>
</div>
</div>
<div class=”block”>
<h4>baseline: 项目的第一行文字的基线对齐。</h4>
<div class=”box box-5-4 line”>
<div class=”box-item”>1</div>
<div class=”box-item item-tall”>2</div>
<div class=”box-item”>3</div>
<div class=”box-item item-tall”>4</div>
</div>
</div>
<div class=”block”>
<h4>stretch（默认值）：如果项目未设置高度或设为 auto，将占满整个容器的高度。</h4>
<div class=”box box-5-5″>
<div class=”box-item”>1</div>
<div class=”box-item item-tall”>2</div>
<div class=”box-item”>3</div>
<div class=”box-item item-tall”>4</div>
</div>
</div>
效果图：

12.8 align-content 属性

align-content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
参数说明：

flex-start：与交叉轴的起点对齐。

flex-end：与交叉轴的终点对齐。

center：与交叉轴的中点对齐。

space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

stretch（默认值）：轴线占满整个交叉轴。

示例代码：
<style>
.box-tall {
height: 800px;
}
.box-6-1 {
flex-wrap: wrap;
align-content: flex-start;
}
.box-6-2 {
flex-wrap: wrap;
align-content: flex-end;
}
.box-6-3 {
flex-wrap: wrap;
align-content: center;
}
.box-6-4 {
flex-wrap: wrap;
align-content: space-between
}
.box-6-5 {
flex-wrap: wrap;
align-content: space-around;
}
.box-6-6 {
flex-wrap: wrap;
align-content: stretch;
}
.box-6-6 .box-item {
height: auto;
}
</style>

<div class=”block”>
<h4>flex-start：交叉轴的起点对齐。</h4>
<div class=”box box-tall box-6-1″>
<div class=”box-item”>1</div>
<div class=”box-item”>2</div>
<div class=”box-item”>3</div>
<div class=”box-item”>4</div>
<div class=”box-item”>5</div>
<div class=”box-item”>6</div>
<div class=”box-item”>7</div>
<div class=”box-item”>8</div>
<div class=”box-item”>9</div>
<div class=”box-item”>10</div>
<div class=”box-item”>11</div>
<div class=”box-item”>12</div>
</div>
</div>
<div class=”block”>
<h4>flex-end：与交叉轴的终点对齐。</h4>
<div class=”box box-tall box-6-2″>
<div class=”box-item”>1</div>
<div class=”box-item”>2</div>
<div class=”box-item”>3</div>
<div class=”box-item”>4</div>
<div class=”box-item”>5</div>
<div class=”box-item”>6</div>
<div class=”box-item”>7</div>
<div class=”box-item”>8</div>
<div class=”box-item”>9</div>
<div class=”box-item”>10</div>
<div class=”box-item”>11</div>
<div class=”box-item”>12</div>
</div>
</div>
<div class=”block”>
<h4>center：与交叉轴的中点对齐。</h4>
<div class=”box box-tall box-6-3″>
<div class=”box-item”>1</div>
<div class=”box-item”>2</div>
<div class=”box-item”>3</div>
<div class=”box-item”>4</div>
<div class=”box-item”>5</div>
<div class=”box-item”>6</div>
<div class=”box-item”>7</div>
<div class=”box-item”>8</div>
<div class=”box-item”>9</div>
<div class=”box-item”>10</div>
<div class=”box-item”>11</div>
<div class=”box-item”>12</div>
</div>
</div>
<div class=”block”>
<h4>space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。</h4>
<div class=”box box-tall box-6-4″>
<div class=”box-item”>1</div>
<div class=”box-item”>2</div>
<div class=”box-item”>3</div>
<div class=”box-item”>4</div>
<div class=”box-item”>5</div>
<div class=”box-item”>6</div>
<div class=”box-item”>7</div>
<div class=”box-item”>8</div>
<div class=”box-item”>9</div>
<div class=”box-item”>10</div>
<div class=”box-item”>11</div>
<div class=”box-item”>12</div>
</div>
</div>
<div class=”block”>
<h4>space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。</h4>
<div class=”box box-tall box-6-5″>
<div class=”box-item”>1</div>
<div class=”box-item”>2</div>
<div class=”box-item”>3</div>
<div class=”box-item”>4</div>
<div class=”box-item”>5</div>
<div class=”box-item”>6</div>
<div class=”box-item”>7</div>
<div class=”box-item”>8</div>
<div class=”box-item”>9</div>
<div class=”box-item”>10</div>
<div class=”box-item”>11</div>
<div class=”box-item”>12</div>
</div>
</div>
<div class=”block”>
<h4>stretch（默认值）：轴线占满整个交叉轴。</h4>
<div class=”box box-tall box-6-6″>
<div class=”box-item”>1</div>
<div class=”box-item”>2</div>
<div class=”box-item”>3</div>
<div class=”box-item”>4</div>
<div class=”box-item”>5</div>
<div class=”box-item”>6</div>
<div class=”box-item”>7</div>
<div class=”box-item”>8</div>
<div class=”box-item”>9</div>
<div class=”box-item”>10</div>
<div class=”box-item”>11</div>
<div class=”box-item”>12</div>
</div>
</div>
效果图：

12.9 Order 属性

order 属性定义项目的排列顺序。数值越小，排列越靠前，默认为 0。
.item {
order: <integer>;
}
参数说明：
order 属性值是一个数值，可以是正数，也可以是负数，在当前项目里，数值越小，排列越靠前。
示例代码：
<style>
.box-7 .order {
order: -1;
}
.box-7 .box-item div{
font-size: 14px;
position: relative;
bottom: 90px;
color: #9236f4;
}
</style>

<div class=”box box-7″>
<div class=”box-item”>1</div>
<div class=”box-item”>2</div>
<div class=”box-item”>3</div>
<div class=”box-item order”>4 <div>(order:-1)</div></div>
</div>
效果图：

12.10 flex-grow 属性

flex-grow 属性定义项目的放大比例，默认为 0，即如果存在剩余空间，也不放大。
.item {
flex-grow: <number>; /* default 0 */
}
参数说明：
如果所有项目的 flex-grow 属性都为 1，则它们将等分剩余空间（如果有的话）。如果一个项目的 flex-grow 属性为 2，其他项目都为 1，则前者占据的剩余空间将比其他项多一倍。
示例代码：
<style>
.box-8 .box-item div{
font-size: 14px;
position: relative;
bottom: 90px;
color: #9236f4;
}
.box-8 .grow{
flex-grow: 1;
width: auto;
}
.box-8 .grow-2 {
flex-grow: 2;
}
</style>

<div class=”block”>
<div class=”box box-8″>
<div class=”box-item grow”>1 <div>flex-grow: 1</div></div>
<div class=”box-item grow grow-2″>2 <div>flex-grow: 2</div></div>
<div class=”box-item grow”>3 <div>flex-grow: 1</div></div>
</div>
</div>
效果图：

12.11 flex-shrink 属性

flex-shrink 属性定义了项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小。
.item {
flex-shrink: <number>; /* default 1 */
}
参数说明：

如果所有项目的 flex-shrink 属性都为 1，当空间不足时，都将等比例缩小。如果一个项目的 flex-shrink 属性为 0，其他项目都为 1，则空间不足时，前者不缩小。
负值对该属性无效。

示例代码：
<style>
.box-9 .box-item div{
font-size: 14px;
position: relative;
bottom: 90px;
color: #9236f4;
}
.box-9 .box-item {
width: 400px;
}
.box-9 .shrink{
flex-shrink: 0;
}
</style>

<div class=”block”>
<div class=”box box-9″>
<div class=”box-item shrink”>1 <div>flex-shrink: 0</div></div>
<div class=”box-item”>2</div>
<div class=”box-item”>3</div>
</div>
</div>
效果图：

12.12 flex-basis 属性

flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（main-size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为 auto，即项目的本来大小。
.item {
flex-basis: <length>; | auto; /* default auto */
}
示例代码：
<style>
.box-10 .box-item {
flex-basis: 200px;
width: 400px; /* width 将失去作用 */
}
</style>

<div class=”block”>
<h4></h4>
<div class=”box box-10″>
<div class=”box-item”>1</div>
<div class=”box-item”>2</div>
<div class=”box-item”>3</div>
</div>
</div>
效果图：

12.13 flex 属性

flex 属性是 flex-grow, flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto。后两个属性可选。
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
.item {
flex: none | [<‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’>]
}
12.14 align-self 属性

align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
参数说明：

auto：表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。

flex-start：交叉轴的起点对齐。

flex-end：交叉轴的终点对齐。

center：交叉轴的中点对齐。

baseline: 项目的第一行文字的基线对齐。

stretch（默认值）：如果项目未设置高度或设为 auto，将占满整个容器的高度。

示例代码：
<style>
.box-11 {
height: 400px;
}

.box-11 .box-item {
align-self: flex-start;
}

.box-11 .box-item div{
font-size: 14px;
position: relative;
bottom: 90px;
color: #9236f4;
}

.box-11 .end {
align-self: flex-end;
}
</style>

<div class=”block”>
<h4>stretch（默认值）：轴线占满整个交叉轴。</h4>
<div class=”box box-11″>
<div class=”box-item”>1</div>
<div class=”box-item”>2</div>
<div class=”box-item end”>3<div>flex-end</div></div>
<div class=”box-item”>4</div>
</div>
</div>
效果图：