当前阅读教程:Flex Box实战教程 > 九宫格布局 | |
阅读(22555525) 收藏 赞(5685) 分享 | |
上一篇: 九宫格实战 | 下一篇: 一个项目的布局 |
代码: <!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>九宫格布局</title> </head> <body> <pre> 九宫格布局 flex-direction属性决定主轴的方向(即项目的排列方向):(左中右 上中下) flex-direction: row | row-reverse | column | column-reverse; </pre> <style> .rongqi01{ width:250px; height:250px; background-color:#CCC; display:flex; flex-direction: column; } .rongqi02{ display:flex;} .xm{ width:70px; height:70px; margin:5px; background-color:#0CF;} </style> <div> <div> <div>01</div> <div>02</div> <div>03</div> </div> <div> <div>04</div> <div>05</div> <div>06</div> </div> <div> <div class="xm">07</div> <div class="xm">08</div> <div class="xm">09</div> </div> </div><hr> <style> .rongqi03{ width:250px; height:250px; background-color:#CCC; display:flex; flex-wrap:wrap;} </style> <div> <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> </body> </html> |
|
上一篇: 九宫格实战 | 下一篇: 一个项目的布局 |