今天给大家搞一个弹性盒布局的实例,最近一直在复习一些基础的东西,所以一直会跟大家分享一些基础的东西
说实话,最近感觉被掏空了,别问我为什么,谁去保健谁知道,哈哈,注意安全,好了步入正题,今天用弹性盒写了一个小例子,
关于弹性盒的一些基础我就不列举了,大家有需要可以去 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 阮一峰大佬的网站去看看
他已经写的非常详细了,好,那我们来直接举栗
老规矩,我还是把代码扔上来,大家可以自己拉下去玩一下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{margin: 0;padding: 0} /* box的样式 */ .box{ height: 300px; width: 100%; background: oldlace; margin: 150px auto; display: flex; justify-content: space-around; align-items: center; } /* box下div的样式 */ .box>div{ width: 130px; height: 130px; background-color: black; display: flex; padding: 20px; } /* span的样式 */ span{ height: 25px; width: 25px; background-color: white; border-radius: 50%; } /*写筛子*/ /* 第一个筛子面 */ .a1{ /* 控制主轴的排列 */ justify-content: center; /* 控制副轴的排列 */ align-items: center; } /* 第二个筛子面 */ .a2{ /* 将主轴改变为列 */ flex-direction: column; justify-content: space-around; align-items: center } /* 第三个筛子面 */ .a3{ justify-content: space-between; } .a3>span:nth-of-type(2){ align-self: center; } .a3>span:nth-of-type(3){ align-self: flex-end; } /* 第四个筛子面 */ .a4{ justify-content: space-around; } .a4>div{ display: flex; flex-direction: column; justify-content: space-around; } /* 第五个筛子面 */ .a5{ justify-content: space-around; } .a5>div{ display: flex; flex-direction: column; justify-content:space-around; } /*第六个筛子面*/ .a6{ justify-content: space-around; } .a6>div{ display:flex; flex-direction: column; justify-content: space-around; } </style> </head> <body> <div class="box"> <!-- 第一个div --> <div class="a1"><span></span></div> <!-- 第二个div --> <div class="a2"><span></span><span></span></div> <!-- 第三个div --> <div class="a3"><span></span><span></span><span></span></div> <!-- 第四个div --> <div class="a4"> <div><span></span><span></span></div> <div><span></span><span></span></div> </div> <!-- 第五个div --> <div class="a5"> <div><span></span><span></span></div> <div><span></span></div> <div><span></span><span></span></div> </div> <!-- 第六个div --> <div class="a6"> <div><span></span><span></span><span></span></div> <div><span></span><span></span><span></span></div> </div> </div> </body> </html>
哇,这木长的代码,你竟然能看到这里,太感动了,抓紧联系我好吧,我带你保健去