筆記+小案例 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; ...
筆記+小案例
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>
