当前阅读教程:Flex Box实战教程 > 百分比布局 | |
阅读(22555525) 收藏 赞(5685) 分享 | |
上一篇: 基本网格布局 | 下一篇: 固定的底栏 |
某个网格的宽度为固定的百分比,其余网格平均分配剩余的空间。 HTML代码如下 <div> <div class="Grid-cell u-1of4">...</div> <div>...</div> <div class="Grid-cell u-1of3">...</div> </div> CSS代码如下 .Grid { display: flex; } .Grid-cell { flex: 1; } .Grid-cell.u-full { flex: 0 0 100%; } .Grid-cell.u-1of2 { flex: 0 0 50%; } .Grid-cell.u-1of3 { flex: 0 0 33.3333%; } .Grid-cell.u-1of4 { flex: 0 0 25%; } 代码: <!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>百分比布局</title> </head> <body> <pre> 百分比布局 某个网格的宽度为固定的百分比,其余网格平均分配剩余的空间。 flex: none | flex-grow flex-shrink flex-basis 该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。 </pre> <style> .rongqi{ background-color:#CCC; display:flex; margin:5px;} .xiangmu{ background-color:#3CF; margin:5px;flex:1;} .c-1of3{flex:0 0 33.3%;} .c-1of4{flex:0 0 25%;} </style> <div> <div>1/2</div> <div>1/2</div> </div> <div> <div class="xiangmu c-1of3">1/3</div> <div>auto</div> </div> <div> <div class="xiangmu c-1of4">1/4</div> <div>auto</div> <div>auto</div> <div>auto</div> </div> </body> </html> |
|
上一篇: 基本网格布局 | 下一篇: 固定的底栏 |