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>&nbsp;</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>

 

<!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>&nbsp;</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>
posted @ 2017-12-05 15:48  Sunsin  阅读(242)  评论(0)  编辑  收藏  举报