建一个商业网站要多少钱,网站开发公司长春,wordpress文章微信分享,深圳app网站建设哪家好今天给大家搞一个弹性盒布局的实例#xff0c;最近一直在复习一些基础的东西#xff0c;所以一直会跟大家分享一些基础的东西 说实话#xff0c;最近感觉被掏空了#xff0c;别问我为什么#xff0c;谁去保健谁知道#xff0c;哈哈#xff0c;注意安全#xff0c;好了步…　　今天给大家搞一个弹性盒布局的实例最近一直在复习一些基础的东西所以一直会跟大家分享一些基础的东西 说实话最近感觉被掏空了别问我为什么谁去保健谁知道哈哈注意安全好了步入正题今天用弹性盒写了一个小例子 关于弹性盒的一些基础我就不列举了大家有需要可以去   http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html    阮一峰大佬的网站去看看 他已经写的非常详细了好那我们来直接举栗 老规矩我还是把代码扔上来大家可以自己拉下去玩一下 !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlestyle*{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的样式 */.boxdiv{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;}.a3span:nth-of-type(2){align-self: center;}.a3span:nth-of-type(3){align-self: flex-end;}/* 第四个筛子面 */.a4{justify-content: space-around;}.a4div{display: flex;flex-direction: column;justify-content: space-around;}/* 第五个筛子面 */.a5{justify-content: space-around;}.a5div{display: flex;flex-direction: column;justify-content:space-around;}/*第六个筛子面*/.a6{justify-content: space-around;}.a6div{display:flex;flex-direction: column;justify-content: space-around;}/style /head bodydiv classbox!-- 第一个div --div classa1span/span/div!-- 第二个div --div classa2span/spanspan/span/div!-- 第三个div --div classa3span/spanspan/spanspan/span/div!-- 第四个div --div classa4divspan/spanspan/span/divdivspan/spanspan/span/div/div!-- 第五个div --div classa5divspan/spanspan/span/divdivspan/span/divdivspan/spanspan/span/div/div!-- 第六个div --div classa6divspan/spanspan/spanspan/span/divdivspan/spanspan/spanspan/span/div/div/div /body /html 哇这木长的代码你竟然能看到这里太感动了抓紧联系我好吧我带你保健去 更多专业前端知识请上 【猿2048】www.mk2048.com