当前阅读教程:Flex Box实战教程 > 一个项目的布局 | |
阅读(22555525) 收藏 赞(5685) 分享 | |
上一篇: 九宫格布局 | 下一篇: 两个项目的布局 |
效果图 代码 <!DOCTYPE"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>一个项目的布局(1)</title> </head> <body> <pre> flex-direction属性决定主轴的方向(即项目的排列方向):(左中右 上中下) flex-direction: row | row-reverse | column | column-reverse; justify-content属性定义了项目在主轴上的对齐方式。(左中右) justify-content: flex-start | flex-end | center | space-between | space-around; align-items属性定义项目在交叉轴上如何对齐。(上中下) align-items: flex-start | flex-end | center | baseline | stretch; </pre> <div> <div style="flex-direction:row;justify-content:flex-start;align-items:flex-start;">01</div> </div><hr> <div style="flex-direction:row;justify-content:center;align-items:flex-start;"> <div>02</div> </div><hr> <div style="flex-direction:row;justify-content:flex-end;align-items:flex-start;"> <div>03</div> </div> <hr> <style> .rongqi{ width:250px; height:250px; background-color:#CCC; display:flex;} .xm{ width:70px; height:70px; background-color:#3CF; margin:5px;} </style> <div style="flex-wrap:wrap;"> <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> |
|
上一篇: 九宫格布局 | 下一篇: 两个项目的布局 |