全是代码,直接拷走吧,看是不怎么好看的
参考:http://www.ruanyifeng.com/blog/search.html?cx=016304377626642577906%3Ab_e9skaywzq&cof=FORID%3A11&ie=UTF-8&q=flex&sa.x=0&sa.y=0
作者:阮一峰
CSS
1 <style> 2 p{height:15px} 3 .box{margin:20px;80px;height:80px;box-shadow:5px 5px #999; 4 border:1px solid black;border-radius:10px;} 5 span{margin:5px;16px;height:16px;border-radius:50%;background:black} 6 7 .box1 div{float:left} 8 .clear:after{content:'';clear:both;display:block} 9 /*1*/ 10 .box11{display:flex} 11 .box12{display:flex;justify-content:center} 12 .box13{display:flex;justify-content:flex-end} 13 .box14{display:flex;align-items:center} 14 .box15{display:flex;justify-content:center;align-items:center} 15 .box16{display:flex;justify-content:flex-end;align-items:center} 16 .box17{display:flex;align-items:flex-end;} 17 .box18{display:flex;justify-content:center;align-items:flex-end;} 18 .box19{display:flex;justify-content:flex-end;align-items:flex-end;} 19 /*2*/ 20 .box21{display:flex;justify-content:space-between} 21 .box22{display:flex;justify-content:space-between;align-items:center} 22 .box23{display:flex;justify-content:space-between;align-items:flex-end;} 23 .box24{display:flex;justify-content:space-between;flex-direction:column} 24 .box25{display:flex;justify-content:space-between;flex-direction:column;align-items:center} 25 .box26{display:flex;justify-content:space-between;flex-direction:column;align-items:flex-end} 26 .box27{display:flex;justify-content:space-between;} 27 .box27>.item:nth-child(2){align-self:flex-end} 28 .box28{display:flex;} 29 .box28>.item:nth-child(2){align-self:center} 30 /*3*/ 31 .box31{display:flex} 32 .box32{display:flex;align-items:center} 33 .box33{display:flex;align-items:flex-end} 34 .box34{display:flex;flex-direction:column} 35 .box35{display:flex;flex-direction:column;align-items:center} 36 .box36{display:flex;flex-direction:column;align-items:flex-end} 37 /*3.1*/ 38 .box311{display:flex} 39 .box311 .item:nth-child(3){align-self:center} 40 .box312{display:flex} 41 .box312 .item:nth-child(3){align-self:flex-end} 42 .box313{display:flex;align-items:center} 43 .box313 .item:nth-child(3){align-self:flex-start} 44 .box314{display:flex;align-items:center} 45 .box314 .item:nth-child(3){align-self:flex-end} 46 .box315{display:flex;align-items:flex-end} 47 .box315 .item:nth-child(3){align-self:center} 48 .box316{display:flex;align-items:flex-end} 49 .box316 .item:nth-child(3){align-self:flex-start} 50 /*3.1*/ 51 .box321{display:flex;flex-direction:column} 52 .box321 .item:nth-child(3){align-self:center} 53 .box322{display:flex;flex-direction:column} 54 .box322 .item:nth-child(3){align-self:flex-end} 55 .box323{display:flex;flex-direction:column;align-items:center} 56 .box323 .item:nth-child(3){align-self:flex-start} 57 .box324{display:flex;flex-direction:column;align-items:center} 58 .box324 .item:nth-child(3){align-self:flex-end} 59 .box325{display:flex;flex-direction:column;align-items:flex-end} 60 .box325 .item:nth-child(3){align-self:flex-start} 61 .box326{display:flex;flex-direction:column;align-items:flex-end} 62 .box326 .item:nth-child(3){align-self:center} 63 /*4-5-6-9*/ 64 .box41{display:flex;flex-wrap:wrap;align-content:space-between} 65 .box41 .column{flex-basis:100%;display:flex;justify-content:space-between} 66 .box42{display:flex;flex-wrap:wrap;align-content:space-between} 67 .box43{display:flex;flex-wrap:wrap;align-content:space-between;flex-direction:row-reverse} 68 .box44{display:flex;flex-wrap:wrap;} 69 .box44 .row{flex-basis:100%;display:flex;justify-content:space-between} 70 .box44 .row:nth-child(2){justify-content:center} 71 /*.box44 .row:nth-child(3){display:flex;justify-content:space-between}*/ 72 .box45{display:flex;flex-wrap:wrap;align-content:space-between} 73 .box46{display:flex;flex-direction:column;flex-wrap:wrap;align-content:space-between} 74 .box47{display: flex;flex-wrap: wrap} 75 </style>
HTML
1 <div class="box1"> 2 <p>单项目</p> 3 <div class="box box11"><span class="item"></span></div> 4 <div class="box box12"><span class="item"></span></div> 5 <div class="box box13"><span class="item"></span></div> 6 <div class="box box14"><span class="item"></span></div> 7 <div class="box box15"><span class="item"></span></div> 8 <div class="box box16"><span class="item"></span></div> 9 <div class="box box17"><span class="item"></span></div> 10 <div class="box box18"><span class="item"></span></div> 11 <div class="box box19"><span class="item"></span></div> 12 </div> 13 <div class="clear"></div> 14 <div class="box1"> 15 <p>双项目</p> 16 <div class="box box21"><span class="item"></span><span class="item"></span></div> 17 <div class="box box22"><span class="item"></span><span class="item"></span></div> 18 <div class="box box23"><span class="item"></span><span class="item"></span></div> 19 <div class="box box24"><span class="item"></span><span class="item"></span></div> 20 <div class="box box25"><span class="item"></span><span class="item"></span></div> 21 <div class="box box26"><span class="item"></span><span class="item"></span></div> 22 <div class="box box27"><span class="item"></span><span class="item"></span></div> 23 <div class="box box28"><span class="item"></span><span class="item"></span></div> 24 </div> 25 <div class="clear"></div> 26 <div class="box1"> 27 <p>3项目</p> 28 <div class="box box31"><span class="item"></span><span class="item"></span></span><span class="item"></span></div> 29 <div class="box box32"><span class="item"></span><span class="item"></span></span><span class="item"></span></div> 30 <div class="box box33"><span class="item"></span><span class="item"></span></span><span class="item"></span></div> 31 <div class="box box34"><span class="item"></span><span class="item"></span></span><span class="item"></span></div> 32 <div class="box box35"><span class="item"></span><span class="item"></span></span><span class="item"></span></div> 33 <div class="box box36"><span class="item"></span><span class="item"></span></span><span class="item"></span></div> 34 </div> 35 <div class="clear"></div> 36 <div class="box1"> 37 <p>3.1</p> 38 <div class="box box311"><span class="item"></span><span class="item"></span></span><span class="item"></span></div> 39 <div class="box box312"><span class="item"></span><span class="item"></span></span><span class="item"></span></div> 40 <div class="box box313"><span class="item"></span><span class="item"></span></span><span class="item"></span></div> 41 <div class="box box314"><span class="item"></span><span class="item"></span></span><span class="item"></span></div> 42 <div class="box box315"><span class="item"></span><span class="item"></span></span><span class="item"></span></div> 43 <div class="box box316"><span class="item"></span><span class="item"></span></span><span class="item"></span></div> 44 </div> 45 <div class="clear"></div> 46 <div class="box1"> 47 <p>3.2</p> 48 <div class="box box321"><span class="item"></span><span class="item"></span></span><span class="item"></span></div> 49 <div class="box box322"><span class="item"></span><span class="item"></span></span><span class="item"></span></div> 50 <div class="box box323"><span class="item"></span><span class="item"></span></span><span class="item"></span></div> 51 <div class="box box324"><span class="item"></span><span class="item"></span></span><span class="item"></span></div> 52 <div class="box box325"><span class="item"></span><span class="item"></span></span><span class="item"></span></div> 53 <div class="box box326"><span class="item"></span><span class="item"></span></span><span class="item"></span></div> 54 </div> 55 <div class="clear"></div> 56 <div class="box1"> 57 <p>4-5-6-9</p> 58 <div class="box box41"> 59 <div class="column"><span class="item"></span><span class="item"></span></div> 60 <div class="column"><span class="item"></span><span class="item"></span></div> 61 </div> 62 <div class="box box42"><span class="item"></span><span class="item"></span><span class="item"></span><span class="item"></span></div> 63 <div class="box box43"><span class="item"></span><span class="item"></span><span class="item"></span><span class="item"></span></div> 64 <div class="box box44"> 65 <div class="row"><span class="item"></span><span class="item"></span></div> 66 <div class="row"><span class="item"></span></div> 67 <div class="row"><span class="item"></span><span class="item"></span></div> 68 </div> 69 <div class="box box45"> 70 <span class="item"></span><span class="item"></span><span class="item"></span> 71 <span class="item"></span><span class="item"></span><span class="item"></span> 72 </div> 73 <div class="box box46"> 74 <span class="item"></span><span class="item"></span><span class="item"></span> 75 <span class="item"></span><span class="item"></span><span class="item"></span> 76 </div> 77 <div class="box box47"><span class="item"></span><span class="item"></span><span class="item"></span><span class="item"></span><span class="item"></span><span class="item"></span><span class="item"></span><span class="item"></span></span><span class="item"></span></div> 78 </div>