教程来自阮一峰的flex布局教程实例篇
容器五大属性:
flex-direction:容器内项目的排列方向
(1)row:横向从左往右排列(默认)
(2)row-reverse:横向从右往左排列，是将元素一个一个的靠右放置，要跟justify-content中的flex-end区分清楚
(3)column:纵向从上往下排列
(4)column-reverse:纵向从下往上排列
flex-wrap:项目排列换行
(1)nowrap:不换行,项目超出容器范围自动缩小项目(默认)
(2)wrap:顺序换行
(3)wrap-reverse:排完序后整行交换
justify-content:项目在主轴上的对齐方式（一定要跟flex-direction区分清楚）
(1)flex-start:左对齐(默认)，或向上对齐
(2)center:居中
(3)flex-end:右对齐，或向下对齐，是将元素从左往右排列完后整体右对齐，要跟flex-direction中的row-reverse区分清楚
(4)spaec-around:元素两边平均等分剩余空白间隙部分，最左（上）或最右（下）和元素之间的距离是1：2
(5)space-between:两端对齐，元素之间平均等分生于空白间隙部分
align-items:交叉轴上元素的对齐方式
(1)flex-start:交叉轴起点对齐（向上或向左）
(2)center:交叉轴居中对齐
(3)flex-end:交叉轴结束位置对齐（向下或向右）
(4)stretch:对未设置高度或高度设置为auto的项目进行拉伸填满容器(默认)
(5)baseline：保证元素中的文字在同一条基准线上
align-content:定义轴线的对齐方式
(1)flex-start:交叉轴起点对齐
(2)center:交叉轴中点对齐
(3)flex-end:交叉轴终点对齐
(4)space-between:与交叉轴两段对齐,轴线之间等距
(5)space-aroud:每根轴线等距
(6)strtch:轴线占满整个交叉轴(默认)
项目属性:
order:定义项目排序顺序,数值越小排列越靠前.默认为0
flex-grow:项目放大比例，默认为0不放大，将剩余空间按比例分配给要放大的元素
flex-shrink:项目缩小比例，设置为0不缩小
flex-basis:为项目设置主轴上的固定空间
align-self:允许单个项目与其他项目不同的对齐方式,可以覆盖align-items属性
(一)骰子的布局
1.1单项目一个点
默认为首行左对齐:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 7 <style type="text/css"> 8 body{ 9 background-color: black; 10 } 11 .box{ 12 /* 13 *默认为首行左对齐 14 */ 15 width: 400px; 16 height: 400px; 17 background-color: ghostwhite; 18 display: flex; 19 } 20 .item{ 21 width: 100px; 22 height: 100px; 23 margin: 30px; 24 background-color: #000000; 25 26 } 27 .thick-white-border{ 28 /* 29 *为容器box设置样式 30 */ 31 border-color: #ffffff; 32 border-width: 50px; 33 border-radius: 20px;/*圆角边框*/ 34 } 35 .thick-black-border{ 36 /*为元素span设置样式*/ 37 border-color: #000000; 38 border-radius: 50%;/*把span元素变成圆形*/ 39 } 40 </style> 41 </head> 42 <body> 43 <div class="box thick-white-border"> 44 <!-- 45 --box为外层容器,是骰子的面 46 --> 47 <span class="item thick-black-border"></span> 48 </div> 49 </body> 50 </html>
设置居中对齐:
/*
*把以下代码加入box样式设置中
*/
justify-content: center;
设置右对齐:
justify-content: flex-end;
设置交叉轴对齐方式,将横向轴下移,显示为中间行左对齐:
1 .box{ 2 400px; 3 height: 400px; 4 background-color: ghostwhite; 5 display: flex; 6 align-items: center; 7 }
中间行,中间对齐:
1 .box{ 2 400px; 3 height: 400px; 4 background-color: ghostwhite; 5 display: flex; 6 align-items: center; 7 justify-content: center; 8 }
中间行右对齐:
justify-content: flex-end;
靠低行中间对齐:
align-items: flex-end;
justify-content: center;
靠低行右对齐:
align-items: flex-end;
justify-content: flex-end;
1.2双项目2个点
首行两边对齐:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 7 <style type="text/css"> 8 body{ 9 background-color: black; 10 } 11 .box{ 12 /* 13 *默认为首行左对齐 14 */ 15 width: 400px; 16 height: 400px; 17 background-color: ghostwhite; 18 display: flex; 19 justify-content: space-between;/*首行两边对齐*/ 20 } 21 .item{ 22 width: 100px; 23 height: 100px; 24 margin: 30px; 25 background-color: #000000; 26 27 } 28 .thick-white-border{ 29 /* 30 *为容器box设置样式 31 */ 32 border-color: #ffffff; 33 border-width: 50px; 34 border-radius: 20px;/*圆角边框*/ 35 } 36 .thick-black-border{ 37 /*为元素span设置样式*/ 38 border-color: #000000; 39 border-radius: 50%;/*把span元素变成圆形*/ 40 } 41 </style> 42 </head> 43 <body> 44 <div class="box thick-white-border"> 45 <!-- 46 --box为外层容器,是骰子的面 47 --> 48 <span class="item thick-black-border"></span> 49 <span class="item thick-black-border"></span> 50 <!--CSS文件中的样式设置类可以复用,无需为新span元素单独设置样式--> 51 </div> 52 </body> 53 </html>
等距对齐:
justify-content: space-around;
双项目纵向排列,默认首列:
1 .box{ 2 400px; 3 height: 400px; 4 background-color: ghostwhite; 5 display: flex; 6 flex-direction: column; 7 justify-content: space-around; 8 }
双项目,骰子2点布局:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 7 <style type="text/css"> 8 body{ 9 background-color: black; 10 } 11 .box{ 12 width: 400px; 13 height: 400px; 14 background-color: ghostwhite; 15 display: flex; 16 justify-content: space-around; 17 } 18 .item{ 19 width: 80px; 20 height: 80px; 21 margin: 30px; 22 background-color: #000000; 23 display: flex; 24 } 25 .item:nth-child(2){ 26 align-self: center; 27 } 28 29 30 .thick-white-border{ 31 /* 32 *为容器box设置样式 33 */ 34 border-color: #ffffff; 35 border-width: 50px; 36 border-radius: 20px;/*圆角边框*/ 37 } 38 .thick-black-border{ 39 /*为元素span设置样式*/ 40 border-color: #000000; 41 border-radius: 50%;/*把span元素变成圆形*/ 42 } 43 </style> 44 </head> 45 <body> 46 <div class="box thick-white-border"> 47 <!-- 48 --box为外层容器,是骰子的面 49 --> 50 <span class="item thick-black-border"></span> 51 <span class="item thick-black-border"></span> 52 53 </div> 54 </body> 55 </html>
1.3三项目:
骰子三点斜线布局;
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 7 <style type="text/css"> 8 body{ 9 background-color: black; 10 } 11 .box{ 12 width: 400px; 13 height: 400px; 14 background-color: ghostwhite; 15 display: flex; 16 } 17 .item{ 18 width: 80px; 19 height: 80px; 20 margin: 30px; 21 background-color: #000000; 22 display: flex; 23 } 24 .item:nth-child(2){ 25 align-self: center; 26 } 27 .item:nth-child(3){ 28 align-self: flex-end; 29 } 30 31 32 .thick-white-border{ 33 /* 34 *为容器box设置样式 35 */ 36 border-color: #ffffff; 37 border-width: 50px; 38 border-radius: 20px;/*圆角边框*/ 39 } 40 .thick-black-border{ 41 /*为元素span设置样式*/ 42 border-color: #000000; 43 border-radius: 50%;/*把span元素变成圆形*/ 44 } 45 </style> 46 </head> 47 <body> 48 <div class="box thick-white-border"> 49 <span class="item thick-black-border"></span> 50 <span class="item thick-black-border"></span> 51 <span class="item thick-black-border"></span> 52 </div> 53 </body> 54 </html>
样式文件分离：
便于样式的修改
在页面page文件中的同目录下新建CSS文件，在pages文件中使用@import导入CSS样式文件