彈性盒佈局

時間 2019-11-21

標籤彈性佈局简体版

原文原文鏈接

筆記+小案例html

 1 <style>
 2     
 3     .zi{
 4         height:100px;
 5         width:100px;
 6         background:purple;
 7         margin:2px;
 8         line-height:100px;
 9         text-align: center;
10         color:#fff;
11     }
12     .fu{
13         height:400px;
14         width:600px;
15         margin:50px;
16         background:pink;
17         display:flex;
18         flex-direction:row;
19         flex-wrap:nowrap;
20         align-items:center;
21         justify-content:space-around;
22     }
23 </style>
24 <body>
25     <div class="fu">
26         <div class="zi">一</div>
27         <div class="zi">二</div>
28         <div class="zi">三</div>
29         <div class="zi">四</div>
30         <div class="zi">五</div>
31     </div>
32 </body>
33 </html>
34 <script>
35     flex:1;      //反正就是佔滿了,移動端適配的時候合適.
36     
37     
38     flex-direction     row          row-reverse     column         column-reverse
39     // 主軸方向           左向右          右向左         上向下         下向上
40     
41     flex-wrap          nowrap       wrap           wrap-reverse
42     // 換行不           不換         換            規定元素在必要的時候拆行或拆列，可是以相反的順序
43     
44     align-items           center       flex-start      flex-end        baseline
45     // 縱軸方向         中心         開頭            下頭             基線(沒以爲有啥用)
46     
47     justify-content     flex-start   flex-end       center       space-between       space-around
48     // 主軸方向對齊方式     開頭       結尾           中心          兩邊貼邊兒          兩邊不貼邊兒
49     
50     align-content        //同上
51     // 縱軸方向對齊方式
52 </script>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。