1. 动画动画是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>效果图：