今天看到百度前端学院有关于flex布局方面的内容，就看了下flex布局，顺便做下总结，方便自己以后看。内容大概分几个方面，一、flex布局的好处以及应用场景；二、原理；三、基本内容；四、demo；
一、flex布局的好处以及应用场景：
flex好处就是灵活方便，大多应用在移动端，pc端由于兼容问题应用不太广泛。
二、原理：
说到原理说神马呢？先说下常见的布局吧：一、固定布局：就是宽高都固定的那种，width:500px;height:100px;二、流体式布局：width:100%;height:10%；移动端用rem；
三、弹性布局：就是flex布局；四：position:absolute;float:left;之类的脱离文档流的形式；flex属于弹性布局；弹性布局是 一种更加有效的方式来对一个容器中的条目进行排列、对齐和分配空白空间。即便容器中条目的尺寸未知或是动态变化的，弹性盒布局模型也能正常的工作。在该布局模型中，容器会根据布局的需要，调整其中包含的条目的尺寸和顺序来最好地填充所有可用的空间。当容器的尺寸由于屏幕大小或窗口尺寸发生变化时，其中包含的条目也会被动态地调整。比如当容器尺寸变大时，其中包含的条目会被拉伸以占满多余的空白空间；当容器尺寸变小时，条目会被缩小以防止超出容器的范围。弹性盒布局是与方向无关的。在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。
三、基本内容：包括一些基本属性，用法，参考下列网址
https://segmentfault.com/a/1190000002910324
http://www.w3cplus.com/css3/flexbox-basics.html
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
四、demo：包含了flex一些基本用法；
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 body{
8 background-color: #CCCCCC;
9 padding: 0;
10 margin: 0;
11 }
12 .box1 {
13 background-color: #fff;
14 display: flex;
15 flex-flow: row wrap;
16 }
17 .box2 {
18 background-color: #fff;
19 display: flex;
20 justify-content: space-around;
21 }
22 .box3 {
23 background-color: #fff;
24 display: flex;
25 justify-content: flex-end;
26 }
27 .box4 {
28 background-color: #fff;
29 display: flex;
30 justify-content: space-between;
31 }
32 .box5 {
33 background-color: #fff;
34 display: flex;
35 flex-wrap: wrap;
36 align-items: flex-start;
37 margin: 10px;
38 }
39 .box6 {
40 background-color: #fff;
41 display: flex;
42 flex-flow: row wrap;
43 }
44 .item{
45 text-align: center;
46 margin: 5px;
47 width: 50px;
48 height: 50px;
49 border-radius: 100%;
50 background-color: #000;
51 color: #fff;
52 }
53 .item2{
54 text-align: center;
55 margin: 5px;
56 width: 40px;
57 height: 40px;
58 border-radius: 100%;
59 background-color: #000;
60 color: #fff;
61 }
62 .item5{
63 text-align: center;
64 margin: 5px;
65 width: 40px;
66 height: 40px;
67 border-radius: 100%;
68 background-color: #000;
69 color: #fff;
70 order: 3;
71 }
72 .item6{
73 text-align: center;
74 margin: 5px;
75 width: 40px;
76 height: 40px;
77 border-radius: 100%;
78 background-color: #000;
79 color: #fff;
80 order: 2;
81 }
82 .item7{
83 text-align: center;
84 margin: 5px;
85 width: 40px;
86 height: 40px;
87 border-radius: 100%;
88 background-color: #000;
89 color: #fff;
90 order: 1;
91 }
92 .item8{
93 text-align: center;
94 margin: 5px;
95 width: 40px;
96 height: 40px;
97 border-radius: 100%;
98 background-color: #000;
99 color: #fff;
100 order: 0;
101 }
102 </style>
103 </head>
104 <body>
105 <div class="box1">
106 display: flex;
107 flex-flow: row wrap;
108 <span class="item">1</span>
109 <span class="item">2</span>
110 <span class="item">3</span>
111 <span class="item">4</span>
112 <span class="item">5</span>
113 <span class="item">6</span>
114 </div>
115 <div class="box2">
116 justify-content: space-around;
117 <span class="item">1</span>
118 <span class="item">2</span>
119 <span class="item">3</span>
120 <span class="item">4</span>
121 <span class="item">5</span>
122 <span class="item">6</span>
123 </div>
124 <div class="box3">
125 justify-content: flex-end;
126 <span class="item">1</span>
127 <span class="item">2</span>
128 <span class="item">3</span>
129 <span class="item">4</span>
130 <span class="item">5</span>
131 <span class="item">6</span>
132 </div>
133 <div class="box4">justify-content: space-between;
134 <span class="item">1</span>
135 <span class="item">2</span>
136 <span class="item">3</span>
137 <span class="item">4</span>
138 <span class="item">5</span>
139 <span class="item">6</span>
140 </div>
141 <div class="box5">align-items: flex-start;
142 <span class="item">1</span>
143 <span class="item2">2</span>
144 <span class="item">3</span>
145 <span class="item2">4</span>
146 <span class="item">5</span>
147 <span class="item2">6</span>
148 <span class="item">1</span>
149 <span class="item">2</span>
150 <span class="item2">3</span>
151 <span class="item">4</span>
152 <span class="item">5</span>
153 <span class="item2">6</span>
154 <span class="item">1</span>
155 <span class="item">2</span>
156 <span class="item2">3</span>
157 <span class="item">4</span>
158 <span class="item2">5</span>
159 <span class="item">6</span>
160 <span class="item2">1</span>
161 <span class="item">2</span>
162 <span class="item2">3</span>
163 <span class="item">4</span>
164 <span class="item2">5</span>
165 <span class="item">6</span>
166 <span class="item">1</span>
167 <span class="item">2</span>
168 <span class="item2">3</span>
169 <span class="item2">4</span>
170 <span class="item">5</span>
171 <span class="item">6</span>
172 </div>
173 <div class="box6">order
174 <span class="item5">1</span>
175 <span class="item6">2</span>
176 <span class="item7">3</span>
177 <span class="item8">4</span>
178 </div>
179 </body>
180 </html>
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>center</title>
6 <style>
7 body{
8 padding: 0;
9 margin: 0;
10 }
11 .parent {
12 flex-flow: row wrap;
13 display: flex;
14 height: 100px;
15 }
16 .a {
17 width: 100px;
18 border: 1px solid #FF0000;
19 flex-grow: 1;
20
21 }
22 .b {
23 width: 100px;
24 border: 1px solid #FF0000;
25 flex-grow: 2;
26
27 }
28 .c {
29 width: 100px;
30 border: 1px solid #FF0000;
31 flex-grow: 3;
32
33 }
34 </style>
35 </head>
36 <body>
37 <div class="parent">
38 <div class="a">1</div>
39 <div class="b">2</div>
40 <div class="c">3</div>
41 </div>
42 </body>
43 </html>
参考内容：
http://blog.csdn.net/u010297791/article/details/54945290
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
https://segmentfault.com/a/1190000002910324
http://www.w3cplus.com/css3/flexbox-basics.html
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
http://www.cnblogs.com/imwtr/p/4767664.html