笔记+小案例
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>