当前阅读教程:Flex Box实战教程 > 三个项目的布局 | |
阅读(22555525) 收藏 赞(5685) 分享 | |
上一篇: 两个项目的布局 | 下一篇: 四个项目的布局 |
效果图 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>三个项目的布局(1)</title> </head> <body> <style> .rongqi{ width:250px; height:250px; background-color:#CCC; display:flex;} .xm{ width:70px; height:70px; background-color:#39F; margin:5px;} </style> <div style="flex-wrap:wrap;justify-content:space-around; align-items:flex-start;"> <div style="align-self:center;">01</div> <div style="align-self:flex-end;">02</div> <div style="margin-top:auto;">03</div> </div><hr> <div style="flex-wrap:wrap;justify-content:space-around; align-items:flex-start;"> <div style="margin-top:auto;">01</div> <div style="align-self:flex-end;">02</div> <div style="margin-top:auto;">03</div> </div><hr> <div style="flex-wrap:wrap;justify-content:space-around; align-items:flex-start;"> <div>01</div> <div style="align-self:flex-end;">02</div> <div style="margin-top:auto;">03</div> </div><hr> <div style="flex-wrap:wrap;justify-content:space-around; align-items:flex-start;"> <div>01</div> <div style="align-self:center;">02</div> <div style="margin-top:auto;">03</div> </div><hr> <div style="flex-wrap:wrap;justify-content:space-around; align-items:flex-start;"> <div>01</div> <div style=" margin-bottom:auto; margin-top:auto;">02</div> <div style="margin-top:auto;">03</div> </div><hr> <div style="flex-wrap:wrap;justify-content:space-around; align-items:flex-start;"> <div>01</div> <div>02</div> <div style="margin-top:auto;">03</div> </div><hr> <div style="flex-wrap:wrap;justify-content:space-around; align-items:flex-start;"> <div>01</div> <div>02</div> <div style="align-self:flex-end;">03</div> </div><hr> <div style="flex-wrap:wrap;justify-content:space-around; align-items:flex-start;"> <div>01</div> <div>02</div> <div style="align-self:center;">03</div> </div><hr> <div style="flex-wrap:wrap;justify-content:space-around; align-items:flex-start;"> <div>01</div> <div>02</div> <div style="margin-top:auto; margin-bottom:auto;">03</div> </div><hr> <div style="flex-wrap:wrap;justify-content:space-around; align-items:flex-end;"> <div>01</div> <div>02</div> <div>03</div> </div><hr> <div style="flex-wrap:wrap;justify-content:space-around; align-items:center;"> <div>01</div> <div>02</div> <div>03</div> </div><hr> <div style="flex-wrap:wrap;justify-content:space-around;"> <div>01</div> <div>02</div> <div>03</div> </div><hr> <div style="flex-wrap:wrap;justify-content:space-around;"> <div>01</div> <div>02</div> <div>03</div> <div>04</div> <div>05</div> <div>06</div> <div>07</div> <div>08</div> <div>09</div> </div><hr> </body> </html> |
|
上一篇: 两个项目的布局 | 下一篇: 四个项目的布局 |