例如:我们在写 经典的 筛子布局
如果用传统的position 浮动来写:如第一个筛子:
<div class="div1"> <p></p> </div>样式就写得很麻烦,又由于每个筛子中的点的距离不一样,每个筛子 都有不同的 left top定位,每个筛子 都得写样式,所以这里就有了flex布局
.div1{ width:100px; height:100px; border:1px solid red; position:relative; } .div1 p{ width:15px; height:15px; background-color: black; border-radius: 50%; position: absolute; left:50%; top:50%; }
flex布局,只有四个概念:父容器 子容器 主轴 交叉轴,如下图是用了flex布局后的css代码,最主要原因是,不用每个筛子都设置自己的样式,可以看到,后面的几个筛子 我用了前面几个筛子的样式(当然 前面的几个筛子,样式 都可以套用)
<style> *{ padding:0; margin:0; } body{ display:flex; justify-content: space-around; } [class*='div']{ display: flex; width:100px; height:100px; border-radius:4px; border:1px solid red; padding:5px; } [class*='div'] p{ width:15px; height:15px; border-radius: 50%; margin:2px; background-color: black; } .div1{ justify-content: center; align-items: center; } .div2{ align-items: center; justify-content: space-around; flex-direction:column; } .div3{ justify-content: space-around; align-items: center; } .div3 p:nth-child(1){ align-self: flex-start; } .div3 p:nth-child(3){ align-self: flex-end; } .div4{ justify-content: space-around; flex-direction: column; align-items: center; } .div4 div{ display: flex; justify-content:space-around; width:100%; } .div4 div p{ align-self: center; } .div5{ justify-content: space-around; flex-direction:column; align-items: center; } .div5 div{ display:flex; justify-content: space-around; width:100%; align-items: center; } .div5 div p{ align-self: center; } .div6{ justify-content: space-around; flex-direction:column; align-items: center; } .div6 div{ display:flex; justify-content: space-around; width:100%; align-items: center; } .div6 div p{ align-self: center; } .div8{ justify-content: space-around; align-items: center; flex-direction: column; } .div8 div{ display:flex; justify-content: space-between; width:100%; } .div8 div p{ align-self: center; } </style> <body> <!--筛子布局--> <div class="div1"> <p></p> </div> <div class="div2"> <p></p> <p></p> </div> <div class="div3"> <p></p> <p></p> <p></p> </div> <div class="div4"> <div> <p></p> <p></p> </div> <div> <p></p> <p></p> </div> </div> <div class="div5"> <div> <p></p> <p></p> </div> <div> <p></p> </div> <div> <p></p> <p></p> </div> </div> <div class="div6"> <div> <p></p> <p></p> </div> <div> <p></p> <p></p> </div> <div> <p></p> <p></p> </div> </div> <div class="div6"> <div> <p></p> <p></p> <p></p> </div> <div> <p></p> </div> <div> <p></p> <p></p> <p></p> </div> </div> <div class="div8"> <div> <p></p> <p></p> <p></p> </div> <div> <p></p> <p></p> </div> <div> <p></p> <p></p> <p></p> </div> </div>
关于flex 布局,网上写的很详细,就只有几个知识点,看一遍应该就会了,运用一次就可以得心应手了