flex-白红宇

flex
阅读量：2243 次
发布时间：2019-05-09
本文共 15995 字，大约阅读时间需要 53 分钟。
地址：
例子::运行后看效果
1   2   3   4 
       5 Web的Flex弹性盒模型  6 135 136 137     Web的Flex弹性盒模型
138     
     
      139 140         
      [ flex ]
141         
      
       142             
       
        143                 
        
         144                     
         display: -webkit-flex;
145                 
        
146                 
        
         147                     
         
          width:100px;
         
148                     
         
          flex: 2;
         
149                     
         
          flex: 1;
         
150                 
        
151             
       
152 153             
       
        154                 
        
         155                     
         display: -webkit-flex; 
156                 
        
157                 
        
         158                     
         
          159                         
          width:150px; 
          margin-right:10px;
         
160                     
         
          flex: 1;
         
161                     
         
          162                         
          width:150px; 
          margin-left:10px;
         
163                 
        
164             
       
165         
      
166 167         
      [ flex-direction ]
168         
      
       169             
       
        170                 
        
         171                     
         flex-direction: row; /*default*/
172                     
         display: -webkit-flex;
173                 
        
174                 
        
         175                     
         
          flex: 1;
         
176                     
         
          flex: 2;
         
177                     
         
          flex: 3;
         
178                 
        
179             
       
180 181             
       
        182                 
        
         183                     
         flex-direction: row-reverse;
184                     
         display: -webkit-flex; 
185                 
        
186                 
        
         187                     
         
          flex: 1;
         
188                     
         
          flex: 2;
         
189                     
         
          flex: 3;
         
190                 
        
191             
       
192 193             
       
        194                 
        
         195                     
         flex-direction: column;
196                     
         display: -webkit-flex; 
197                 
        
198                 
        
         199                     
         
          flex: 1;
         
200                     
         
          flex: 2;
         
201                     
         
          flex: 3;
         
202                 
        
203             
       
204 205             
       
        206                 
        
         207                     
         flex-direction: column-reverse;
208                     
         display: -webkit-flex; 
209                 
        
210                 
        
         211                     
         
          flex: 1;
         
212                     
         
          flex: 2;
         
213                     
         
          flex: 3;
         
214                 
        
215             
       
216         
      
217 218         
      [ flex-wrap ]
219         
      
       220             
       
        221                 
        
         222                     
         -webkit-flex-wrap: nowrap; /* default */
223                     
         display: -webkit-flex; 
224                     
         width: 400px
225                 
        
226                 
        
         227                     
         
          100px;
         
228                     
         
          width: 200px;
         
229                     
         
          width: 300px;
         
230                 
        
231             
       
232             
       
        233                 
        
         234                     
         -webkit-flex-wrap: wrap
235                     
         display: -webkit-flex; 
236                     
         width: 400px
237                 
        
238                 
        
         239                     
         
          100px;
         
240                     
         
          width: 200px;
         
241                     
         
          width: 300px;
         
242                 
        
243             
       
244             
       
        245                 
        
         246                     
         -webkit-flex-wrap: wrap-reverse
247                     
         display: -webkit-flex; 
248                     
         width: 400px
249                 
        
250                 
        
         251                     
         
          100px;
         
252                     
         
          width: 200px;
         
253                     
         
          width: 300px;
         
254                 
        
255             
       
    256         
      
257 258         
      [ flex-flow ]: flex-direction flex-wrap; /* 自个体会吧 */
259 260         
      [ justify-content ]
261         
      
       262             
       
        263                 
        
         264                     
         /* 效果如同 float:left; */
265                     
         justify-content: flex-start; /* default */
266                     
         display: -webkit-flex;
267                 
        
268                 
        
         269                     
         
          width:100px;
         
270                     
         
          width:100px;
         
271                 
        
272             
       
273 274             
       
        275                 
        
         276                     
         
         /* 效果如同 float:right; */
         
277                     
         justify-content: flex-end;
278                     
         display: -webkit-flex;
279                 
        
280                 
        
         281                     
         
          width:100px;
         
282                     
         
          width:100px;
         
283                 
        
284             
       
285 286             
       
        287                 
        
         288                     
         /* 第三代水平居中方案 */
289                     
         justify-content: center;
290                     
         display: -webkit-flex;
291                 
        
292                 
        
         293                     
         
          width:100px;
         
294                     
         
          width:100px;
         
295                 
        
296             
       
297 298             
       
        299                 
        
         300                     
         justify-content: space-between; 
301                     
         display: -webkit-flex;
302                 
        
303                 
        
         304                     
         
          width:100px;
         
305                     
         
          width:100px;
         
306                 
        
307             
       
308 309             
       
        310                 
        
         311                     
         justify-content: space-around; 
312                     
         display: -webkit-flex;
313                 
        
314                 
        
         315                     
         
          width:100px;
         
316                     
         
          width:100px;
         
317                 
        
318             
       
319         
      
320 321         
      [ align-self ]
322         
      
       323             
       
        324                 
        
         325                     
         display: -webkit-flex;
326                 
        
327                 
        
         328                     
         
          align-self:flex-start;
         
329                     
         
          align-self:flex-end;
         
330                     
         
          align-self:center;
         
331                     
         
          332                         
          align-self:auto;333                         
          /*default */334                     
         
335 336                     
         
          align-self:baseline;
         
337                     
         
          align-self:stretch;
         
338                 
        
339             
       
340         
      
341 342         
      [ align-items ]
343         
      
       344             
       
        345                 
        
         346                     
         align-items: flex-start; /* default */
347                     
         display: -webkit-flex;
348                 
        
349                 
        
         350                     
         
          width:100px;
         
351                     
         
          width:100px;
         
352                 
        
353             
       
354 355             
       
        356                 
        
         357                     
         align-items: flex-end; 
358                     
         display: -webkit-flex;
359                 
        
360                 
        
         361                     
         
          width:100px;
         
362                     
         
          width:100px;
         
363                 
        
364             
       
365 366             
       
        367                 
        
         368                     
         /* 第三代垂直居中 */
369                     
         align-items: center; 
370                     
         display: -webkit-flex;
371                 
        
372                 
        
         373                     
         
          width:100px;
         
374                     
         
          width:100px;
         
375                 
        
376             
       
377 378             
       
        379                 
        
         380                     
         align-items: baseline; 
381                     
         display: -webkit-flex;
382                 
        
383                 
        
         384                     
         
          width:100px;
         
385                     
         
          width:100px;
         
386                 
        
387             
       
388 389             
       
        390                 
        
         391                     
         align-items: stretch; 
392                     
         display: -webkit-flex;
393                 
        
394                 
        
         395                     
         
          height:100px;
         
396                     
         
          min-height:20px;
         
397                     
         
          max-height:60px;
         
398                 
        
399             
       
400         
      
401 402 403         
      [ align-content ]
404         
      
       405             
       
        406                 
        
         407                     
         /*  对比 align-items*/
408                     
         align-items: flex-start
409                     
         display: -webkit-flex;
410                 
        
411                 
        
         412                     
         
          a
         
413                     
         
          b
         
414                     
         
          c
         
415                     
         
          d
         
416                     
         
          e
         
417                     
         
          f
         
418 419                 
        
420             
       
421 422             
       
        423                 
        
         424                     
         align-content: flex-start; 
425                     
         display: -webkit-flex;
426                 
        
427                 
        
         428                     
         
          a
         
429                     
         
          b
         
430                     
         
          c
         
431                     
         
          d
         
432                     
         
          e
         
433                     
         
          f
         
434 435                 
        
436             
       
437 438             
       
        439                 
        
         440                     
         align-content: flex-end; 
441                     
         display: -webkit-flex;
442                 
        
443                 
        
         444                     
         
          a
         
445                     
         
          b
         
446                     
         
          c
         
447                     
         
          d
         
448                     
         
          e
         
449                     
         
          f
         
450 451                 
        
452             
       
453             
       
        454                 
        
         455                     
         align-content: center; 
456                     
         display: -webkit-flex;
457                 
        
458                 
        
         459                     
         
          a
         
460                     
         
          b
         
461                     
         
          c
         
462                     
         
          d
         
463                     
         
          e
         
464                     
         
          f
         
465 466                 
        
467             
       
468             
       
        469                 
        
         470                     
         align-content: space-between; 
471                     
         display: -webkit-flex;
472                 
        
473                 
        
         474                     
         
          a
         
475                     
         
          b
         
476                     
         
          c
         
477                     
         
          d
         
478                     
         
          e
         
479                     
         
          f
         
480                 
        
481             
       
482             
       
        483                 
        
         484                     
         align-content: space-around; 
485                     
         display: -webkit-flex;
486                 
        
487                 
        
         488                     
         
          a
         
489                     
         
          b
         
490                     
         
          c
         
491                     
         
          d
         
492                     
         
          e
         
493                     
         
          f
         
494 495                 
        
496             
       
        497 498             
       
        499                 
        
         500                     
         align-content: stretch; /*default*/ 
501                     
         display: -webkit-flex;
502                 
        
503                 
        
         504                     
         
          a
         
505                     
         
          b
         
506                     
         
          c
         
507                     
         
          d
         
508                     
         
          e
         
509                     
         
          f
         
510 511                 
        
512             
       
    513     514         
      
    515 516         
      [ order ]
517         
      
       518             
       
        519                 
        
         520                     
         display: -webkit-flex;
521                 
        
522                 
        
         523                     
         
          a
         
524                     
         
          b
         
525                     
         
          c
         
526                     
         
           d (order:-1) 
         
527                     
         
          e
         
528                     
         
          f
         
529                 
        
530             
       
531         
      
532 533     
     
534     535 536 537