CSS3 入门详解（二）

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="box">
   <div class="one" id="one"></div>
   <div class="two" id="two"></div>
   <div class="three" id="three"></div>

   <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 class="box">
      <div class="sun"></div>
      <div class="lin1 public"></div>
      <div class="lin2 public"></div>
      <div class="lin3 public">
            <span>
                  <b></b>
            </span>
      </div>

      <div class="lin4 public"></div>

      <div class="line5 public">
             <span>
                   <b></b>
             </span>
      </div>

</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>


<div class="line"></div>

效果图：

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：主轴为垂直方向，起点在下沿。

示例代码：

<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-1-1 {
        flex-direction: row;
    }
    .box-1-2 {
        flex-direction: row-reverse;
    }
    .box-1-3 {
        flex-direction: column;
    }
    .box-1-4 {
        flex-direction: column-reverse;
    }
</style>

<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：换行，第一行在下方

示例代码：

<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-2-1 {
        flex-wrap: nowrap;
    }
    .box-2-2 {
        flex-wrap: wrap;
    }
    .box-2-3 {
        flex-wrap: wrap-reverse;
    }
    </style>

<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>

效果图：

CSS3 入门详解（二）

11. 动画

11.1 如何实现动画

11.2 动画关键属性

11.3 动画案例

12. 伸缩布局

12.1 什么是伸缩布局

12.2 基本概念

12.3 flex-direction属性

12.4 flex-wrap 属性

12.5 flex-flow 属性

12.6 justify-content 属性

12.7 align-items 属性

12.8 align-content 属性

12.9 Order 属性

12.10 flex-grow 属性

12.11 flex-shrink 属性

12.12 flex-basis 属性

12.13 flex 属性

12.14 align-self 属性

深海丶Deepsea

引用和评论

原生 js 实现移动端 Touch 滑动反弹

开发插件集合

CSS 如何模拟“真实的”进度条？

给线条类型的svg图标加上绘制的动画效果

使用flex布局解决经典布局中overflow必须设置高度才能滚动问题

CSS垂直水平居中

纯CSS实现有趣emoji切换开关