1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6
7 <style type="text/css">
8
9 .container{
10 width: 500px;
11 height: 500px;
12 background: yellow;
13 position: relative;
14
15 display: flex;
16
17 /*首先设置主轴, 另一个自动变为副轴*/
18 flex-direction: row;
19 /*考虑是否换行*/
20 flex-wrap: wrap;
21 /*flex3新增语法, 可以同时写上面两个属性*/
22 /*flex-flow: column wrap-reverse;*/
23
24 /*考虑对齐方式, */
25 /*记住一点, 不论是居中对齐还是垂直对齐, 都是仅仅对于每一行而言的,
26 即:
27 默认有多个主轴, 每个主轴的纵列上只有一个元素
28 所以, 默认情况是:
29 主轴上默认为有多个元素, 所以对齐方式都是考虑多个元素而言
30 副轴上默认为由多个主轴, 所有对齐方式都是考虑多个主轴而言*/
31
32 /*定义在主轴上的对其方*/
33 justify-content: center;
34 /*注意点:
35 flex-start, flex-end, center是把多个元素作为一个整体, 整体为一个元素, 不包含主轴的剩余空间
36 space-between, space-around, space-evenly是把一个主轴作为一个整体, 包含了主轴空间的剩余空间*/
37
38 /*考虑纵轴上多个主轴的对齐方式*/
39 align-content: space-evenly;/*类比于主轴中的元素对齐方式, 每一个主轴当做一个元素, */
40 /*考虑每一个主轴上的元素在这个主轴上的纵列对齐方式*/
41 align-items: center;
42 }
43
44 .container div{
45 width: 100px;
46 height: 100px;
47 background: greenyellow;
48 border:2px black solid;
49 margin: 2px;
50
51 /*考虑布局中每一个元素的对齐方式*/
52
53 /*首先考虑优先级*/
54 order: 0;
55
56 /*考虑对剩余空间的占用, 属性值是一个比例*/
57 /*flex-grow: 1;
58 flex-shrink: 1;*/
59
60
61 /*项目占据的主轴空间, 说白了就是重新定义这个元素的宽度*/
62 flex-basis: 200px;
63
64 /*考虑自己特殊的对齐需求,
65 这里需要明确一点:
66 由于每一个元素是依赖于主轴的, 每一个主轴整体依赖于副轴对齐
67 所以, 每一个元素设置自身的对齐方式主要是设置自身在主轴上的纵轴对齐方式*/
68
69 align-self: flex-end;
70 }
71 </style>
72 </head>
73 <body>
74 <div>关于元素水平垂直居中及其flex布局复习</div>
75 <div class="container">
76 <div class="inner01"></div>
77 <div class="inner02"></div>
78 <div class="inner03"></div>
79 <div></div>
80 <div></div>
81 <div></div>
82 </div>
83 </body>
84 </html>
