教程来自阮一峰的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>

defalut

设置居中对齐:

/*
*把以下代码加入box样式设置中
*/
justify-content: center;

设置右对齐:

justify-content: flex-end;

设置交叉轴对齐方式,将横向轴下移,显示为中间行左对齐:

1 .box{
2 width: 400px;
3 height: 400px;
4 background-color: ghostwhite;
5 display: flex;
6 align-items: center;
7 }

中间行,中间对齐:

1 .box{
2 width: 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>

双项目2个点

等距对齐:

justify-content: space-around;

双项目纵向排列,默认首列:

1 .box{
2 width: 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>

骰子2点

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样式文件

posted on 2019-04-19 16:40 六耳石猴阅读(371) 评论(0) 编辑收藏举报