【原创】display:flex布局大全

全都是自己写的希望大家可以点个赞谢谢！
Html代码（没时间精简请多包涵）
  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7     <title>Flex布局大全</title>
  8     <style>
  9         body,html{
 10             width: 100%;
 11             height: 100%;
 12             display: flex;
 13             justify-content: space-between;
 14         }
 15         .fore{
 16             width: 700px;
 17             height: 277px;
 18             margin: auto;
 19             display: flex;
 20             justify-content:space-around;
 21             flex-wrap: wrap;
 22         }
 23         .row1,.row2,.row3{
 24             width: 700px;
 25             height: 95px;
 26             display: flex;
 27             justify-content: space-around;
 28         }
 29         .row1{
 30             margin-top: 8px;
 31         }
 32         .father{
 33             background-color: #323232;
 34             height: 70px;
 35             width: 70px;
 36             border-radius: 8px ;
 37         }
 38         .son{
 39             width: 20px;
 40             height: 20px;
 41             border-radius: 10px;
 42             background-color: #fff;
 43         }
 44         .father2{
 45             display: flex;
 46             justify-content: center;
 47         }
 48        .father3{
 49         display: flex;
 50             justify-content: flex-end;
 51        }
 52        .father4{
 53         display: flex;
 54         justify-content: space-between;
 55        }
 56        .father5{
 57         display: flex;
 58         justify-content: flex-end;
 59        }
 60        .foreSom{
 61         display: flex;
 62         flex-direction: column;
 63         justify-content: space-between;
 64        }
 65        .father6{
 66            display: flex;
 67            justify-content: space-between;
 68        }
 69       
 70        .foreSon32{
 71         display: flex;
 72         flex-direction: column;
 73         justify-content: center;
 74        }
 75        .foreSon33{
 76         display: flex;
 77         flex-direction: column;
 78         justify-content: flex-end;
 79        }
 80        .father7{
 81             display: flex;
 82             justify-content: space-between;
 83        }
 84        .foreSon51{
 85            display: flex;
 86            flex-direction: column;
 87            justify-content: space-between;
 88        }
 89        .foreSon52{
 90            display: flex;
 91            flex-direction: column;
 92            justify-content: center;
 93        }
 94        .foreSon53{
 95            display: flex;
 96            flex-direction: column;
 97            justify-content: space-between;
 98        }
 99        
100 
101        /* 第二行 */
102        .father2-1{
103            display: flex;
104            justify-content: flex-start;
105            align-items: center;
106        }
107        .father2-2{
108            display: flex;
109            justify-content: center;
110            align-items: center;
111        }
112        .father2-3{
113            display: flex;
114            justify-content: flex-end;
115            align-items: center;
116        }
117        .father2-4{
118            display: flex;
119            flex-direction: column;
120            justify-content: space-between;
121        }
122        .father2-5{
123            display: flex;
124            justify-content: space-between;
125            align-items: flex-end;
126        }
127        .father2-6{
128            display: flex;
129            justify-content: space-between;
130            flex-wrap: wrap;
131        }
132        .foreSon2-6{
133             display: flex;
134             flex-direction: column;
135             justify-content: space-between;
136        }
137      
138        .father2-7{
139            display: flex;
140            justify-content: space-between;
141            flex-wrap: wrap;
142        }
143        .foreSon2-7{
144             display: flex;
145             flex-direction: column;
146             justify-content: space-between;
147        }
148        .father3-1{
149            display: flex;
150            align-items: flex-end;
151        }
152        .father3-2{
153            display: flex;
154            align-items: flex-end;
155            justify-content: center;
156        }
157        .father3-3{
158            display: flex;
159            align-items: flex-end;
160            justify-content: flex-end;
161        }
162        .father3-4{
163            display: flex;
164        }
165        .foreSon3-4-1{
166            display: flex;
167        }
168        .foreSon3-4-2{
169            align-self: center;
170        }
171        .father3-5{
172         display: flex;
173         justify-content: space-between;
174        }
175        .foreSon3-5-2{
176            align-self: center;
177        }
178        .father3-6{
179         display: flex;
180         justify-content: space-between;
181        }
182        .foreSon3-6-2{
183            align-self: flex-end;
184        }
185        .father3-7{
186            display: flex;
187            flex-wrap: wrap;
188        }
189        .foreSon3-7-1{
190            display: flex;
191            flex-basis: 100%;
192            justify-content: space-between;
193        }
194        .foreSon3-7-2{
195             display: flex;
196             flex-basis: 70px;
197             justify-content: center;
198        }
199        .foreSon3-7-3{
200             display: flex;
201             justify-content: space-between;
202             flex-basis: 100%;
203        }
204        
205     </style>
206 </head>
207 <body>
208     <div class="fore">
209         <div class="row1">
210                 <div class="father">
211                         <div class="son1 son"></div>
212                 </div>
213                 <div class="father father2">
214                         <div class="son1 son"></div>
215                 </div>
216                 <div class="father father3">
217                         <div class="son1 son"></div>
218                 </div>
219                 <div class="father father4">
220                         <div class="son1 son"></div>
221                         <div class="son1 son"></div>
222                 </div>
223                 <div class="father father5">
224                         <div class="foreSom">
225                                 <div class="son1 son"></div>
226                                 <div class="son1 son"></div>
227                         </div>
228                 </div>
229                 <div class="father father6">
230                         <div class="foreSon31">
231                                 <div class="son1 son"></div>
232                         </div>
233                         <div class="foreSon32">
234                                 <div class="son1 son"></div>
235                         </div>
236                         <div class="foreSon33">
237                                 <div class="son1 son"></div>
238                         </div>
239                 </div>
240                 <div class="father father7">
241                         <div class="foreSon51">
242                                 <div class="son1 son"></div>
243                                 <div class="son1 son"></div>
244                         </div>
245                         <div class="foreSon52">
246                                 <div class="son1 son"></div>
247                         </div>
248                         <div class="foreSon53">
249                                 <div class="son1 son"></div>
250                                 <div class="son1 son"></div>
251                         </div>
252                 </div>
253                 
254         </div>
255         <div class="row2">
256                 <div class="father father2-1">
257                         <div class="son1 son"></div>
258                 </div>
259                 <div class="father father2-2">
260                         <div class="son1 son"></div>
261                 </div>
262                 <div class="father father2-3">
263                         <div class="son1 son"></div>
264                 </div>
265                 <div class="father father2-4">
266                         <div class="son1 son"></div>
267                         <div class="son1 son"></div>
268                 </div>
269                 <div class="father father2-5">
270                         <div class="son1 son"></div>
271                         <div class="son1 son"></div>
272                 </div>
273                 <div class="father father2-6">
274                     <div class="foreSon2-6">
275                             <div class="son1 son"></div>
276                             <div class="son1 son"></div>
277                     </div>
278                     <div class="foreSon2-6">
279                             <div class="son1 son"></div>
280                             <div class="son1 son"></div>
281                     </div>
282                 </div>
283                 <div class="father father2-7">
284                         <div class="foreSon2-7">
285                                 <div class="son1 son"></div>
286                                 <div class="son1 son"></div>
287                                 <div class="son1 son"></div>
288                         </div>
289                         <div class="foreSon2-7">
290                                 <div class="son1 son"></div>
291                                 <div class="son1 son"></div>
292                                 <div class="son1 son"></div>
293                         </div>
294                 </div>
295         </div>
296         <div class="row3">
297                 <div class="father father3-1">
298                         <div class="son1 son"></div>
299                 </div>
300                 <div class="father father3-2">
301                         <div class="son1 son"></div>
302                 </div>
303                 <div class="father father3-3">
304                         <div class="son1 son"></div>
305                 </div>
306                 <div class="father father3-4">
307                         <div class="foreSon3-4-1">
308                                 <div class="son1 son"></div>
309                         </div>
310                         <div class="foreSon3-4-2">
311                                 <div class="son1 son"></div>
312                         </div>
313                 </div>
314                 <div class="father father3-5">
315                         <div class="foreSon3-5-1">
316                                 <div class="son1 son"></div>
317                         </div>
318                         <div class="foreSon3-5-2">
319                                 <div class="son1 son"></div>
320                         </div>
321                 </div>
322                 <div class="father father3-6">
323                         <div class="foreSon3-6-1">
324                                 <div class="son1 son"></div>
325                         </div>
326                         <div class="foreSon3-6-2">
327                                 <div class="son1 son"></div>
328                         </div>
329                 </div>
330                 <div class="father father3-7">
331                         <div class="foreSon3-7-1">
332                                 <div class="son1 son"></div>
333                                 <div class="son1 son"></div>
334                         </div>
335                         <div class="foreSon3-7-2">
336                                 <div class="son1 son"></div>
337                         </div>
338                         <div class="foreSon3-7-3">
339                                 <div class="son1 son"></div>
340                                 <div class="son1 son"></div>
341                                 <div class="son1 son"></div>
342                         </div>
343                 </div>
344         </div>
345     </div>
346     
347     
348 </body>
349 </html>
全都是自己写的希望大家可以点个赞！！！（顺便凑下字数）
posted @ 2019-08-21 20:51 一路向北√ 阅读(547) 评论(0) 编辑收藏举报
刷新页面返回顶部
一路向北√

斯人若彩虹 , 遇上方知有。

【原创】display:flex布局大全

公告

一路向北√

斯人若彩虹 , 遇上方知有 。

【原创】display:flex布局大全

公告

斯人若彩虹 , 遇上方知有。
