二、弹性布局：
布局的传统解决方案，基于盒状模型，依赖于display属性+position属性+float属性，它对于那些特殊布局非常的不方便，
W3c提出了一种新的方案 --Flex布局，可以简介、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能
注意： 设置在父元素上，使用弹性盒的时候， 浮动 vertica-align 多列 行内块都不遵守了，但是定位还是要进行遵守的。
1. 首先 display:flex; 这个是布局的父亲。
2.布局的流向：
横向：1.flex-direction: row; 2.逆向横向流向： flex-direction: row-reverse;
纵向：：flex-direction: column; 2.逆向：flex-direction: column-reverse;
3.换行
flex-wrap: 默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行
nowrap：当子元素溢出父容器时不换行。
wrap：当子元素溢出父容器时自动换行。
wrap-reverse：换行，第一行在下方
2和3最终可以简写为： flex-flow:row wrap;
4.主轴横向：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 <style> 8 .flexibleLayout{ 9 width: 700px; 10 height: 700px; 11 border: 1px solid red; 12 /* 这个盒子的布局是给父亲设置 */ 13 display: flex; 14 /* 主轴流向 可以不存在*/ 15 /* flex-flow:row wrap; */ 16 /* 正序靠左*/ 17 /* justify-content: flex-start; */ 18 /* 正序靠右 */ 19 /* justify-content: flex-end; */ 20 /* 中间的间距是两边的两倍 */ 21 /* justify-content: space-around; */ 22 /* 间距均分两边存有间距 */ 23 /* justify-content: space-evenly; */ 24 /* 均分两边没有边距。*/ 25 justify-content: space-between; 26 27 } 28 .flexibleLayout div:nth-child(1){ 29 width: 100px; 30 height: 100px; 31 background-color: orange; 32 } 33 .flexibleLayout div:nth-child(2){ 34 width: 100px; 35 height: 100px; 36 background-color: goldenrod; 37 } 38 .flexibleLayout div:nth-child(3){ 39 width: 100px; 40 height: 100px; 41 background-color: green; 42 } 43 .flexibleLayout div:nth-child(4){ 44 width: 100px; 45 height: 100px; 46 background-color: rgb(224, 37, 68); 47 } 48 .flexibleLayout div:nth-child(5){ 49 width: 100px; 50 height: 100px; 51 background-color: rgb(212, 87, 250); 52 } 53 </style> 54 </head> 55 <body> 56 <div class="flexibleLayout"> 57 <div></div> 58 <div></div> 59 <div></div> 60 <div></div> 61 <div></div> 62 </div> 63 </body> 64 </html>
5.主轴纵向 ：：：重要 纵向一定要加换行
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 <style> 8 .flexibleLayout{ 9 width: 300px; 10 height: 700px; 11 border: 1px solid red; 12 /* 这个盒子的布局是给父亲设置 */ 13 display: flex; 14 /* 一定要换行 */ 15 flex-wrap: wrap; 16 /* 在上面正向对齐 */ 17 /* align-content: flex-start; */ 18 /* 在下面正向对齐 */ 19 /* align-content: flex-end; */ 20 /* 居中对齐上下两边的距离相等 */ 21 align-content: center; 22 /* 上下留有一定距离，中间同样也会存放距离 */ 23 /* align-content: space-around; */ 24 /* 上下到头，中间留有距离 */ 25 /* align-content: space-between; */ 26 27 } 28 .flexibleLayout div:nth-child(1){ 29 width: 100px; 30 height: 100px; 31 background-color: orange; 32 } 33 .flexibleLayout div:nth-child(2){ 34 width: 100px; 35 height: 100px; 36 background-color: goldenrod; 37 } 38 .flexibleLayout div:nth-child(3){ 39 width: 100px; 40 height: 100px; 41 background-color: green; 42 } 43 .flexibleLayout div:nth-child(4){ 44 width: 100px; 45 height: 100px; 46 background-color: rgb(224, 37, 68); 47 } 48 .flexibleLayout div:nth-child(5){ 49 width: 100px; 50 height: 100px; 51 background-color: rgb(212, 87, 250); 52 } 53 </style> 54 </head> 55 <body> 56 <div class="flexibleLayout"> 57 <div></div> 58 <div></div> 59 <div></div> 60 <div></div> 61 <div></div> 62 </div> 63 </body> 64 </html>
6.侧轴对齐
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 <style> 8 .box{ 9 width: 300px; 10 height: 300px; 11 margin: 100px auto; 12 border: 1px solid #000; 13 /* 弹性盒布局 */ 14 display: flex; 15 flex-wrap: wrap; 16 17 /* 侧轴 */ 18 /* 向上对齐 */ 19 /* align-items:flex-start; */ 20 /* 向下对齐 */ 21 /* align-items:flex-end; */ 22 /* 内容居中 上下中间都是与间距 */ 23 /* align-items:center; */ 24 /* 基线对齐 根据元素内容来对齐子元素 */ 25 /* align-items:baseline; */ 26 /* （默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度 */ 27 /* align-items:stretch; */ 28 } 29 .box div{ 30 width: 100px; 31 /* height: 100px; */ 32 background: #000; 33 } 34 .box div:nth-child(1){ 35 background: #f00; 36 } 37 .box div:nth-child(2){ 38 /* height: 200px; */ 39 /* padding-top: 40px; */ 40 background: #99f; 41 } 42 .box div:nth-child(3){ 43 /* height: 200px; */ 44 /* padding-top: 90px; */ 45 background: #99f; 46 } 47 </style> 48 </head> 49 <body> 50 <div class="box"> 51 <div>1</div> 52 <div>2</div> 53 <div>3</div> 54 <div>3</div> 55 </div> 56 </body> 57 </html>
侧轴不需要添加换行，所以说比纵轴比较好。以下设置在子元素
2 弹性盒子子元素顺序(设置在子元素上) 3 order: 排序 4 负数靠前:(越小越前) 5 0为原始位置 6 正整数靠后(越大越后) 7 8 弹性盒子分配剩余空间(设置在子元素上) 可以直接简写为 flex：1 9 flex-grow : 10 0为默认 11 分配提成 数字 12 13 检索弹性盒的收缩比率(子元素设置) 子元素超出父元素。 14 flex-shrink: 15 默认:1 16 数字 17 18 注：溢出时计算比例 19 li被分成5分 a=20% b=20% c=60% 溢出总宽度=300 li宽度=200 20 a宽度=200-300*20%=140 21 b宽度=200-300*20%=140 22 c宽度=200-300*60%=20
-------------------------------------------------------------------------------------- 23 24 伸缩性（设置子元素上） 25 flex: 26 按提成分配 数字 27 0 0 百分比分配
----------------------------------------
占多大的空间
flex-basis:400px 父元素计算拉伸或者压缩基数。 写在子元素上
28 29 calc() 函数用于动态计算长度值。 30 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)； 31 任何长度值都可以使用calc()函数进行计算； 32 calc()函数支持 "+", "-", "*", "/" 运算； 33 calc()函数使用标准的数学运算优先级规则； 34 width: calc(100% - 400px);
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=`, initial-scale=1.0"> 6 <title>Document</title> 7 <style> 8 .box{ 9 width: 600px; 10 height: 600px; 11 border: 1px solid red; 12 display: flex; 13 } 14 div{ 15 width: 200px; 16 height: 200px; 17 } 18 .box div:nth-child(1){ 19 background-color: orange; 20 /* align-self: flex-start; */ 21 align-self: flex-end; 22 } 23 /* .box div:nth-child(2){ 24 background-color: orangered; 25 } */ 26 </style> 27 </head> 28 <body> 29 <!-- 设置在子元素上 只能上下进行移动 --> 30 <div class="box"> 31 <div></div> 32 <!-- <div></div> --> 33 </div> 34 </body> 35 </html>