flex 布局示例
1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta charset="utf-8">
6 <title>flex實例</title>
7 <style>
8 * {
9 font-family: "微軟雅黑";
10 }
11
12 html,
13 body {
14 margin: 0;
15 padding: 0;
16 }
17
18 h2 {
19 font-size: 20px;
20 }
21
22 h3 {
23 font-size: 18px;
24 font-weight: normal;
25 }
26
27 .box {
28 padding: 20px;
29 border-bottom: 1px dashed #aaa;
30 }
31
32 .box:after {
33 content: "";
34 display: block;
35 width: 100%;
36 line-height: 1px;
37 clear: both;
38 }
39
40 .demo {
41 background: #f1f1f1;
42 padding: 5px;
43 box-sizing: border-box;
44 box-shadow: 5px 5px 10px #ddd;
45 margin-right: 5%;
46 margin-bottom: 10px;
47 width: 45%;
48 float: left;
49 }
50
51 .container {
52 display: -webkit-flex;
53 display: flex;
54 }
55
56 .container div:nth-child(1) {
57 background: #D8614C;
58 }
59
60 .container div:nth-child(2) {
61 background: #43BBD2;
62 }
63
64 .container div:nth-child(3) {
65 background: #6EC342;
66 }
67
68 .container div {
69 min-height: 50px;
70 color: #fff;
71 text-align: center;
72 line-height: 50px;
73 background: #006699;
74 }
75
76 .item {
77 width: 100px;
78 margin: 0 10px 10px 0;
79 }
80 </style>
81 </head>
82
83 <body>
84
85 <div class="box">
86 <h2>[flex] 彈性盒模型布局</h2>
87 <div class="demo">
88 <h3>display:-webkit-flex;</h3>
89 <div class="container" style="flex-direction:row;">
90 <div style="width: 100px;">100px</div>
91 <div style="flex: 2;">flex: 2;</div>
92 <div style="flex: 1;">flex: 1;</div>
93 </div>
94 </div>
95 <div class="demo">
96 <h3>display:-webkit-flex;</h3>
97 <div class="container">
98 <div style="width: 150px;margin-right:10px;">150px,mright=10</div>
99 <div style="flex: 1;">flex: 1;</div>
100 <div style="width: 150px;margin-left:10px;">150px,mleft=10</div>
101 </div>
102 </div>
103 </div>
104
105
106 <div class="box">
107 <h2>[ flex-direction ] 元素開始方向</h2>
108 <div class="demo">
109 <h3>display:-webkit-flex;</h3>
110 <h3>flex-direction:row /* defalut */;</h3>
111 <div class="container" style="flex-direction:row;">
112 <div style="flex: 3;">flex: 3;</div>
113 <div style="flex: 2;">flex: 2;</div>
114 <div style="flex: 1;">flex: 1;</div>
115 </div>
116 </div>
117 <div class="demo">
118 <h3>display:-webkit-flex;</h3>
119 <h3>flex-direction:row-reverse;</h3>
120 <div class="container" style="flex-direction:row-reverse;">
121 <div style="flex: 3;">flex: 3;</div>
122 <div style="flex: 2;">flex: 2;</div>
123 <div style="flex: 1;">flex: 1;</div>
124 </div>
125 </div>
126 <div class="demo">
127 <h3>display:-webkit-flex;</h3>
128 <h3>flex-direction:column;</h3>
129 <div class="container" style="flex-direction:column;">
130 <div style="flex: 3;">flex: 3;</div>
131 <div style="flex: 2;">flex: 2;</div>
132 <div style="flex: 1;">flex: 1;</div>
133 </div>
134 </div>
135 <div class="demo">
136 <h3>display:-webkit-flex;</h3>
137 <h3>flex-direction:column-reverse;</h3>
138 <div class="container" style="flex-direction:column-reverse;">
139 <div style="flex: 3;">flex: 3;</div>
140 <div style="flex: 2;">flex: 2;</div>
141 <div style="flex: 1;">flex: 1;</div>
142 </div>
143 </div>
144 </div>
145
146 <!-- 是否換行 -->
147 <div class="box">
148 <h2>[ flex-wrap ] 元素是否換行</h2>
149 <div class="demo">
150 <h3>display:-webkit-flex;</h3>
151 <h3>flex-wrap:nowrap; /* default */</h3>
152 <div class="container" style="-webkit-flex-wrap:nowrap; border:1px dashed #666;">
153 <div style="width: 100px;">100px</div>
154 <div style="width: 200px;">200px</div>
155 <div style="width: 300px;">300px</div>
156 </div>
157 </div>
158 <div class="demo">
159 <h3>display:-webkit-flex;</h3>
160 <h3>flex-wrap:wrap; </h3>
161 <div class="container" style="-webkit-flex-wrap:wrap;border:1px dashed #666;">
162 <div style="width: 100px;">100px</div>
163 <div style="width: 200px;">200px</div>
164 <div style="width: 300px;">300px</div>
165 </div>
166 </div>
167 </div>
168
169 <!-- 橫向排版 -->
170 <div class="box">
171 <h2>[ justify-content ] 元素橫向排版</h2>
172 <div class="demo">
173 <h3>display:-webkit-flex;</h3>
174 <h3>justify-content:flex-start; /* default */</h3>
175 <div class="container" style="justify-content:flex-start; border:1px dashed #666;">
176 <div style="width: 100px;">100px</div>
177 <div style="width: 200px;">200px</div>
178 </div>
179 </div>
180 <div class="demo">
181 <h3>display:-webkit-flex;</h3>
182 <h3>justify-content:flex-end; </h3>
183 <div class="container" style="justify-content:flex-end; border:1px dashed #666;">
184 <div style="width: 100px;">100px</div>
185 <div style="width: 200px;">200px</div>
186 </div>
187 </div>
188 <div class="demo">
189 <h3>display:-webkit-flex;</h3>
190 <h3>justify-content:center; </h3>
191 <div class="container" style="justify-content:center; border:1px dashed #666;">
192 <div style="width: 100px;">100px</div>
193 <div style="width: 200px;">200px</div>
194 </div>
195 </div>
196 <div class="demo">
197 <h3>display:-webkit-flex;</h3>
198 <h3>justify-content:space-between; /* default */</h3>
199 <div class="container" style="justify-content:space-between; border:1px dashed #666;">
200 <div style="width: 100px;">100px</div>
201 <div style="width: 200px;">200px</div>
202 </div>
203 </div>
204 <div class="demo">
205 <h3>display:-webkit-flex;</h3>
206 <h3>justify-content:space-around; /* default */</h3>
207 <div class="container" style="justify-content:space-around; border:1px dashed #666;">
208 <div style="width: 100px;">100px</div>
209 <div style="width: 200px;">200px</div>
210 </div>
211 </div>
212 </div>
213
214 <!-- 縱向排版 -->
215 <div class="box">
216 <h2>[ align-self ] 元素縱向排版，用在子元素上</h2>
217 <div class="demo">
218 <h3>display:-webkit-flex;</h3>
219 <div class="container" style="height:200px; border:1px dashed #666;">
220 <div style="flex:1;align-self: flex-start;">align-self: flex-start;</div>
221 <div style="flex:1;align-self: center;">align-self: center;</div>
222 <div style="flex:1;align-self: flex-end;">align-self: flex-end;</div>
223 </div>
224 </div>
225 <div class="demo">
226 <h3> </h3>
227 <div class="container" style="height:200px; border:1px dashed #666;">
228 <div style="flex:1;align-self:auto;">align-self:auto; /*default*/</div>
229 <div style="flex:1;align-self: baseline;">align-self: baseline;</div>
230 <div style="flex:1;align-self: stretch;">align-self: stretch;</div>
231 </div>
232 </div>
233 </div>
234
235
236 <div class="box">
237 <h2>[ align-items ] 元素縱向排版，用在父元素上</h2>
238 <div class="demo">
239 <h3>align-items:flex-start;</h3>
240 <div class="container" style="height:200px; border:1px dashed #666;align-items:flex-start">
241 <div style="flex:1;">1</div>
242 <div style="flex:1;">2</div>
243 <div style="flex:1;">3</div>
244 </div>
245 </div>
246 <div class="demo">
247 <h3>align-items:center;</h3>
248 <div class="container" style="height:200px; border:1px dashed #666;align-items:center">
249 <div style="flex:1;">1</div>
250 <div style="flex:1;">2</div>
251 <div style="flex:1;">3</div>
252 </div>
253 </div>
254 <div class="demo">
255 <h3>align-items:flex-end;</h3>
256 <div class="container" style="height:200px; border:1px dashed #666;align-items:flex-end">
257 <div style="flex:1;">1</div>
258 <div style="flex:1;">2</div>
259 <div style="flex:1;">3</div>
260 </div>
261 </div>
262 <div class="demo">
263 <h3>混合使用</h3>
264 <div class="container" style="height:200px; border:1px dashed #666;align-items:flex-end">
265 <div style="flex:1;">1</div>
266 <div style="flex:1; align-self:center">2 align-self:center</div>
267 <div style="flex:1;">3</div>
268 </div>
269 </div>
270 </div>
271
272
273 <div class="box">
274 <h2>[ align-content ] 元素分布排版</h2>
275 <div class="demo">
276 <h3 style="color:red">與 align-items:flex-start; 對比</h3>
277 <div class="container" style="height:300px; border:1px dashed #666;align-items:flex-start; flex-wrap: wrap;">
278 <div class="item">1</div>
279 <div class="item">2</div>
280 <div class="item">3</div>
281 <div class="item">4</div>
282 <div class="item">5</div>
283 <div class="item">6</div>
284 <div class="item">7</div>
285 <div class="item">8</div>
286 <div class="item">9</div>
287 <div class="item">10</div>
288 <div class="item">11</div>
289 </div>
290 </div>
291 <div class="demo">
292 <h3>align-content:flex-start;</h3>
293 <div class="container" style="height:300px; border:1px dashed #666;align-content:flex-start; flex-wrap: wrap;">
294 <div class="item">1</div>
295 <div class="item">2</div>
296 <div class="item">3</div>
297 <div class="item">4</div>
298 <div class="item">5</div>
299 <div class="item">6</div>
300 <div class="item">7</div>
301 <div class="item">8</div>
302 <div class="item">9</div>
303 <div class="item">10</div>
304 <div class="item">11</div>
305 </div>
306 </div>
307 <div class="demo">
308 <h3>align-content:center;</h3>
309 <div class="container" style="height:300px; border:1px dashed #666;align-content:center; flex-wrap: wrap;">
310 <div class="item">1</div>
311 <div class="item">2</div>
312 <div class="item">3</div>
313 <div class="item">4</div>
314 <div class="item">5</div>
315 <div class="item">6</div>
316 <div class="item">7</div>
317 <div class="item">8</div>
318 <div class="item">9</div>
319 <div class="item">10</div>
320 <div class="item">11</div>
321 </div>
322 </div>
323 <div class="demo">
324 <h3>align-content:flex-end;</h3>
325 <div class="container" style="height:300px; border:1px dashed #666;align-content:flex-end; flex-wrap: wrap;">
326 <div class="item">1</div>
327 <div class="item">2</div>
328 <div class="item">3</div>
329 <div class="item">4</div>
330 <div class="item">5</div>
331 <div class="item">6</div>
332 <div class="item">7</div>
333 <div class="item">8</div>
334 <div class="item">9</div>
335 <div class="item">10</div>
336 <div class="item">11</div>
337 </div>
338 </div>
339
340 <div class="demo">
341 <h3>align-content:stretch;</h3>
342 <div class="container" style="height:300px; border:1px dashed #666;align-content:stretch; flex-wrap: wrap;">
343 <div class="item">1</div>
344 <div class="item">2</div>
345 <div class="item">3</div>
346 <div class="item">4</div>
347 <div class="item">5</div>
348 <div class="item">6</div>
349 <div class="item">7</div>
350 <div class="item">8</div>
351 <div class="item">9</div>
352 <div class="item">10</div>
353 <div class="item">11</div>
354 </div>
355 </div>
356 </div>
357
358
359 <!-- 排序 -->
360 <div class="box">
361 <h2>[ order ] 元素排序控制,值越小越靠前</h2>
362 <div class="demo">
363 <h3>order:num;</h3>
364 <div class="container" style="height:200px; border:1px dashed #666;">
365 <div class="item" style="order: 1;">1 order:1;</div>
366 <div class="item" style="order: 0;">2 order:0;</div>
367 <div class="item" style="order: -1;">3 order:-1;</div>
368 <div class="item">4</div>
369 <div class="item">5</div>
370 </div>
371 </div>
372 </body>
373
374 </html>
<head> <meta charset="utf-8"> <title>flex實例</title> <style> * { font-family: "微軟雅黑"; } html, body { margin: 0; padding: 0; } h2 { font-size: 20px; } h3 { font-size: 18px; font-weight: normal; } .box { padding: 20px; border-bottom: 1px dashed #aaa; } .box:after { content: ""; display: block; width: 100%; line-height: 1px; clear: both; } .demo { background: #f1f1f1; padding: 5px; box-sizing: border-box; box-shadow: 5px 5px 10px #ddd; margin-right: 5%; margin-bottom: 10px; width: 45%; float: left; } .container { display: -webkit-flex; display: flex; } .container div:nth-child(1) { background: #D8614C; } .container div:nth-child(2) { background: #43BBD2; } .container div:nth-child(3) { background: #6EC342; } .container div { min-height: 50px; color: #fff; text-align: center; line-height: 50px; background: #006699; } .item { width: 100px; margin: 0 10px 10px 0; } </style> </head>
<body>
<div class="box"> <h2>[flex] 彈性盒模型布局</h2> <div class="demo"> <h3>display:-webkit-flex;</h3> <div class="container" style="flex-direction:row;"> <div style="width: 100px;">100px</div> <div style="flex: 2;">flex: 2;</div> <div style="flex: 1;">flex: 1;</div> </div> </div> <div class="demo"> <h3>display:-webkit-flex;</h3> <div class="container"> <div style="width: 150px;margin-right:10px;">150px,mright=10</div> <div style="flex: 1;">flex: 1;</div> <div style="width: 150px;margin-left:10px;">150px,mleft=10</div> </div> </div> </div>
<div class="box"> <h2>[ flex-direction ] 元素開始方向</h2> <div class="demo"> <h3>display:-webkit-flex;</h3> <h3>flex-direction:row /* defalut */;</h3> <div class="container" style="flex-direction:row;"> <div style="flex: 3;">flex: 3;</div> <div style="flex: 2;">flex: 2;</div> <div style="flex: 1;">flex: 1;</div> </div> </div> <div class="demo"> <h3>display:-webkit-flex;</h3> <h3>flex-direction:row-reverse;</h3> <div class="container" style="flex-direction:row-reverse;"> <div style="flex: 3;">flex: 3;</div> <div style="flex: 2;">flex: 2;</div> <div style="flex: 1;">flex: 1;</div> </div> </div> <div class="demo"> <h3>display:-webkit-flex;</h3> <h3>flex-direction:column;</h3> <div class="container" style="flex-direction:column;"> <div style="flex: 3;">flex: 3;</div> <div style="flex: 2;">flex: 2;</div> <div style="flex: 1;">flex: 1;</div> </div> </div> <div class="demo"> <h3>display:-webkit-flex;</h3> <h3>flex-direction:column-reverse;</h3> <div class="container" style="flex-direction:column-reverse;"> <div style="flex: 3;">flex: 3;</div> <div style="flex: 2;">flex: 2;</div> <div style="flex: 1;">flex: 1;</div> </div> </div> </div>
<!-- 是否換行 --> <div class="box"> <h2>[ flex-wrap ] 元素是否換行</h2> <div class="demo"> <h3>display:-webkit-flex;</h3> <h3>flex-wrap:nowrap; /* default */</h3> <div class="container" style="-webkit-flex-wrap:nowrap; border:1px dashed #666;"> <div style="width: 100px;">100px</div> <div style="width: 200px;">200px</div> <div style="width: 300px;">300px</div> </div> </div> <div class="demo"> <h3>display:-webkit-flex;</h3> <h3>flex-wrap:wrap; </h3> <div class="container" style="-webkit-flex-wrap:wrap;border:1px dashed #666;"> <div style="width: 100px;">100px</div> <div style="width: 200px;">200px</div> <div style="width: 300px;">300px</div> </div> </div> </div>
<!-- 橫向排版 --> <div class="box"> <h2>[ justify-content ] 元素橫向排版</h2> <div class="demo"> <h3>display:-webkit-flex;</h3> <h3>justify-content:flex-start; /* default */</h3> <div class="container" style="justify-content:flex-start; border:1px dashed #666;"> <div style="width: 100px;">100px</div> <div style="width: 200px;">200px</div> </div> </div> <div class="demo"> <h3>display:-webkit-flex;</h3> <h3>justify-content:flex-end; </h3> <div class="container" style="justify-content:flex-end; border:1px dashed #666;"> <div style="width: 100px;">100px</div> <div style="width: 200px;">200px</div> </div> </div> <div class="demo"> <h3>display:-webkit-flex;</h3> <h3>justify-content:center; </h3> <div class="container" style="justify-content:center; border:1px dashed #666;"> <div style="width: 100px;">100px</div> <div style="width: 200px;">200px</div> </div> </div> <div class="demo"> <h3>display:-webkit-flex;</h3> <h3>justify-content:space-between; /* default */</h3> <div class="container" style="justify-content:space-between; border:1px dashed #666;"> <div style="width: 100px;">100px</div> <div style="width: 200px;">200px</div> </div> </div> <div class="demo"> <h3>display:-webkit-flex;</h3> <h3>justify-content:space-around; /* default */</h3> <div class="container" style="justify-content:space-around; border:1px dashed #666;"> <div style="width: 100px;">100px</div> <div style="width: 200px;">200px</div> </div> </div> </div>
<!-- 縱向排版 --> <div class="box"> <h2>[ align-self ] 元素縱向排版，用在子元素上</h2> <div class="demo"> <h3>display:-webkit-flex;</h3> <div class="container" style="height:200px; border:1px dashed #666;"> <div style="flex:1;align-self: flex-start;">align-self: flex-start;</div> <div style="flex:1;align-self: center;">align-self: center;</div> <div style="flex:1;align-self: flex-end;">align-self: flex-end;</div> </div> </div> <div class="demo"> <h3> </h3> <div class="container" style="height:200px; border:1px dashed #666;"> <div style="flex:1;align-self:auto;">align-self:auto; /*default*/</div> <div style="flex:1;align-self: baseline;">align-self: baseline;</div> <div style="flex:1;align-self: stretch;">align-self: stretch;</div> </div> </div> </div>
<div class="box"> <h2>[ align-items ] 元素縱向排版，用在父元素上</h2> <div class="demo"> <h3>align-items:flex-start;</h3> <div class="container" style="height:200px; border:1px dashed #666;align-items:flex-start"> <div style="flex:1;">1</div> <div style="flex:1;">2</div> <div style="flex:1;">3</div> </div> </div> <div class="demo"> <h3>align-items:center;</h3> <div class="container" style="height:200px; border:1px dashed #666;align-items:center"> <div style="flex:1;">1</div> <div style="flex:1;">2</div> <div style="flex:1;">3</div> </div> </div> <div class="demo"> <h3>align-items:flex-end;</h3> <div class="container" style="height:200px; border:1px dashed #666;align-items:flex-end"> <div style="flex:1;">1</div> <div style="flex:1;">2</div> <div style="flex:1;">3</div> </div> </div> <div class="demo"> <h3>混合使用</h3> <div class="container" style="height:200px; border:1px dashed #666;align-items:flex-end"> <div style="flex:1;">1</div> <div style="flex:1; align-self:center">2 align-self:center</div> <div style="flex:1;">3</div> </div> </div> </div>
<div class="box"> <h2>[ align-content ] 元素分布排版</h2> <div class="demo"> <h3 style="color:red">與 align-items:flex-start; 對比</h3> <div class="container" style="height:300px; border:1px dashed #666;align-items:flex-start; flex-wrap: wrap;"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> <div class="item">10</div> <div class="item">11</div> </div> </div> <div class="demo"> <h3>align-content:flex-start;</h3> <div class="container" style="height:300px; border:1px dashed #666;align-content:flex-start; flex-wrap: wrap;"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> <div class="item">10</div> <div class="item">11</div> </div> </div> <div class="demo"> <h3>align-content:center;</h3> <div class="container" style="height:300px; border:1px dashed #666;align-content:center; flex-wrap: wrap;"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> <div class="item">10</div> <div class="item">11</div> </div> </div> <div class="demo"> <h3>align-content:flex-end;</h3> <div class="container" style="height:300px; border:1px dashed #666;align-content:flex-end; flex-wrap: wrap;"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> <div class="item">10</div> <div class="item">11</div> </div> </div>
<div class="demo"> <h3>align-content:stretch;</h3> <div class="container" style="height:300px; border:1px dashed #666;align-content:stretch; flex-wrap: wrap;"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> <div class="item">10</div> <div class="item">11</div> </div> </div> </div>
<!-- 排序 --> <div class="box"> <h2>[ order ] 元素排序控制,值越小越靠前</h2> <div class="demo"> <h3>order:num;</h3> <div class="container" style="height:200px; border:1px dashed #666;"> <div class="item" style="order: 1;">1 order:1;</div> <div class="item" style="order: 0;">2 order:0;</div> <div class="item" style="order: -1;">3 order:-1;</div> <div class="item">4</div> <div class="item">5</div> </div> </div> </body>
</html>
?
<!DOCTYPE html> <html><head> <meta charset="utf-8"> <title>flex實例</title> <style> * { font-family: "微軟雅黑"; } html, body { margin: 0; padding: 0; } h2 { font-size: 20px; } h3 { font-size: 18px; font-weight: normal; } .box { padding: 20px; border-bottom: 1px dashed #aaa; } .box:after { content: ""; display: block; width: 100%; line-height: 1px; clear: both; } .demo { background: #f1f1f1; padding: 5px; box-sizing: border-box; box-shadow: 5px 5px 10px #ddd; margin-right: 5%; margin-bottom: 10px; width: 45%; float: left; } .container { display: -webkit-flex; display: flex; } .container div:nth-child(1) { background: #D8614C; } .container div:nth-child(2) { background: #43BBD2; } .container div:nth-child(3) { background: #6EC342; } .container div { min-height: 50px; color: #fff; text-align: center; line-height: 50px; background: #006699; } .item { width: 100px; margin: 0 10px 10px 0; } </style> </head>
<body>
<div class="box"> <h2>[flex] 彈性盒模型布局</h2> <div class="demo"> <h3>display:-webkit-flex;</h3> <div class="container" style="flex-direction:row;"> <div style="width: 100px;">100px</div> <div style="flex: 2;">flex: 2;</div> <div style="flex: 1;">flex: 1;</div> </div> </div> <div class="demo"> <h3>display:-webkit-flex;</h3> <div class="container"> <div style="width: 150px;margin-right:10px;">150px,mright=10</div> <div style="flex: 1;">flex: 1;</div> <div style="width: 150px;margin-left:10px;">150px,mleft=10</div> </div> </div> </div>
<div class="box"> <h2>[ flex-direction ] 元素開始方向</h2> <div class="demo"> <h3>display:-webkit-flex;</h3> <h3>flex-direction:row /* defalut */;</h3> <div class="container" style="flex-direction:row;"> <div style="flex: 3;">flex: 3;</div> <div style="flex: 2;">flex: 2;</div> <div style="flex: 1;">flex: 1;</div> </div> </div> <div class="demo"> <h3>display:-webkit-flex;</h3> <h3>flex-direction:row-reverse;</h3> <div class="container" style="flex-direction:row-reverse;"> <div style="flex: 3;">flex: 3;</div> <div style="flex: 2;">flex: 2;</div> <div style="flex: 1;">flex: 1;</div> </div> </div> <div class="demo"> <h3>display:-webkit-flex;</h3> <h3>flex-direction:column;</h3> <div class="container" style="flex-direction:column;"> <div style="flex: 3;">flex: 3;</div> <div style="flex: 2;">flex: 2;</div> <div style="flex: 1;">flex: 1;</div> </div> </div> <div class="demo"> <h3>display:-webkit-flex;</h3> <h3>flex-direction:column-reverse;</h3> <div class="container" style="flex-direction:column-reverse;"> <div style="flex: 3;">flex: 3;</div> <div style="flex: 2;">flex: 2;</div> <div style="flex: 1;">flex: 1;</div> </div> </div> </div>
<!-- 是否換行 --> <div class="box"> <h2>[ flex-wrap ] 元素是否換行</h2> <div class="demo"> <h3>display:-webkit-flex;</h3> <h3>flex-wrap:nowrap; /* default */</h3> <div class="container" style="-webkit-flex-wrap:nowrap; border:1px dashed #666;"> <div style="width: 100px;">100px</div> <div style="width: 200px;">200px</div> <div style="width: 300px;">300px</div> </div> </div> <div class="demo"> <h3>display:-webkit-flex;</h3> <h3>flex-wrap:wrap; </h3> <div class="container" style="-webkit-flex-wrap:wrap;border:1px dashed #666;"> <div style="width: 100px;">100px</div> <div style="width: 200px;">200px</div> <div style="width: 300px;">300px</div> </div> </div> </div>
<!-- 橫向排版 --> <div class="box"> <h2>[ justify-content ] 元素橫向排版</h2> <div class="demo"> <h3>display:-webkit-flex;</h3> <h3>justify-content:flex-start; /* default */</h3> <div class="container" style="justify-content:flex-start; border:1px dashed #666;"> <div style="width: 100px;">100px</div> <div style="width: 200px;">200px</div> </div> </div> <div class="demo"> <h3>display:-webkit-flex;</h3> <h3>justify-content:flex-end; </h3> <div class="container" style="justify-content:flex-end; border:1px dashed #666;"> <div style="width: 100px;">100px</div> <div style="width: 200px;">200px</div> </div> </div> <div class="demo"> <h3>display:-webkit-flex;</h3> <h3>justify-content:center; </h3> <div class="container" style="justify-content:center; border:1px dashed #666;"> <div style="width: 100px;">100px</div> <div style="width: 200px;">200px</div> </div> </div> <div class="demo"> <h3>display:-webkit-flex;</h3> <h3>justify-content:space-between; /* default */</h3> <div class="container" style="justify-content:space-between; border:1px dashed #666;"> <div style="width: 100px;">100px</div> <div style="width: 200px;">200px</div> </div> </div> <div class="demo"> <h3>display:-webkit-flex;</h3> <h3>justify-content:space-around; /* default */</h3> <div class="container" style="justify-content:space-around; border:1px dashed #666;"> <div style="width: 100px;">100px</div> <div style="width: 200px;">200px</div> </div> </div> </div>
<!-- 縱向排版 --> <div class="box"> <h2>[ align-self ] 元素縱向排版，用在子元素上</h2> <div class="demo"> <h3>display:-webkit-flex;</h3> <div class="container" style="height:200px; border:1px dashed #666;"> <div style="flex:1;align-self: flex-start;">align-self: flex-start;</div> <div style="flex:1;align-self: center;">align-self: center;</div> <div style="flex:1;align-self: flex-end;">align-self: flex-end;</div> </div> </div> <div class="demo"> <h3> </h3> <div class="container" style="height:200px; border:1px dashed #666;"> <div style="flex:1;align-self:auto;">align-self:auto; /*default*/</div> <div style="flex:1;align-self: baseline;">align-self: baseline;</div> <div style="flex:1;align-self: stretch;">align-self: stretch;</div> </div> </div> </div>
<div class="box"> <h2>[ align-items ] 元素縱向排版，用在父元素上</h2> <div class="demo"> <h3>align-items:flex-start;</h3> <div class="container" style="height:200px; border:1px dashed #666;align-items:flex-start"> <div style="flex:1;">1</div> <div style="flex:1;">2</div> <div style="flex:1;">3</div> </div> </div> <div class="demo"> <h3>align-items:center;</h3> <div class="container" style="height:200px; border:1px dashed #666;align-items:center"> <div style="flex:1;">1</div> <div style="flex:1;">2</div> <div style="flex:1;">3</div> </div> </div> <div class="demo"> <h3>align-items:flex-end;</h3> <div class="container" style="height:200px; border:1px dashed #666;align-items:flex-end"> <div style="flex:1;">1</div> <div style="flex:1;">2</div> <div style="flex:1;">3</div> </div> </div> <div class="demo"> <h3>混合使用</h3> <div class="container" style="height:200px; border:1px dashed #666;align-items:flex-end"> <div style="flex:1;">1</div> <div style="flex:1; align-self:center">2 align-self:center</div> <div style="flex:1;">3</div> </div> </div> </div>
<div class="box"> <h2>[ align-content ] 元素分布排版</h2> <div class="demo"> <h3 style="color:red">與 align-items:flex-start; 對比</h3> <div class="container" style="height:300px; border:1px dashed #666;align-items:flex-start; flex-wrap: wrap;"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> <div class="item">10</div> <div class="item">11</div> </div> </div> <div class="demo"> <h3>align-content:flex-start;</h3> <div class="container" style="height:300px; border:1px dashed #666;align-content:flex-start; flex-wrap: wrap;"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> <div class="item">10</div> <div class="item">11</div> </div> </div> <div class="demo"> <h3>align-content:center;</h3> <div class="container" style="height:300px; border:1px dashed #666;align-content:center; flex-wrap: wrap;"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> <div class="item">10</div> <div class="item">11</div> </div> </div> <div class="demo"> <h3>align-content:flex-end;</h3> <div class="container" style="height:300px; border:1px dashed #666;align-content:flex-end; flex-wrap: wrap;"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> <div class="item">10</div> <div class="item">11</div> </div> </div>
<div class="demo"> <h3>align-content:stretch;</h3> <div class="container" style="height:300px; border:1px dashed #666;align-content:stretch; flex-wrap: wrap;"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> <div class="item">10</div> <div class="item">11</div> </div> </div> </div>
<!-- 排序 --> <div class="box"> <h2>[ order ] 元素排序控制,值越小越靠前</h2> <div class="demo"> <h3>order:num;</h3> <div class="container" style="height:200px; border:1px dashed #666;"> <div class="item" style="order: 1;">1 order:1;</div> <div class="item" style="order: 0;">2 order:0;</div> <div class="item" style="order: -1;">3 order:-1;</div> <div class="item">4</div> <div class="item">5</div> </div> </div> </body>
</html>
轉(zhuǎn)載于:https://www.cnblogs.com/cisum/p/7987368.html
總結(jié)
- 上一篇： 安卓版LightBlue 低功耗蓝牙B
- 下一篇： 代码实现:给一个不多于5位的正整数，要求