位置:电子教程 > Flex Box实战教程 (如果看不到内容请使用360浏览器) 推荐学习资源
网页布局实战
九宫格实战
当前阅读教程:Flex Box实战教程 > 百分比布局
阅读(22555525)      收藏       赞(5685)      分享
上一篇: 基本网格布局 下一篇: 固定的底栏

某个网格的宽度为固定的百分比,其余网格平均分配剩余的空间。

image.png


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%;
}



image.png

代码:

<!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>


上一篇: 基本网格布局 下一篇: 固定的底栏
毕业设计网             广告联系QQ:45157718(微信同号)