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

最简单的网格布局,就是平均分布。在容器里面平均分配空间,跟上面的骰子布局很像,但是需要设置项目的自动缩放。

image.png

image.png

代码如下:

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>基本网格布局</title>
</head>
 
<body>
最简单的网格布局,就是平均分布。在容器里面平均分配空间,跟上面骰子布局很像,但是需要设置项目的自动缩放。<br>
 
<style>
.rongqi01{ display:flex; background-color:#0CF; margin:5px;}
.xm01{ background-color:#CCC; width:80%; margin:5px;}
.xm02{ background-color:#999; width:20%; margin:5px;}
</style>
 
<div>
  <div>01</div>
  <div>02</div>
</div>
 
<div>
     <div>01</div>
    <div>02</div>
    <div>03</div>
</div>
 
<div>
  <div>flex-direction属性决定主轴的方向(即项目的排列方向):(左中右    上中下)</div>
  <div>最简单的网格布局,就是平均分布。在容器里面平均分配空间,跟上面的骰子布局很像,但是需要设置项目的自动缩放最简单的网格布局,就是平均分布。在容器里面平均分配空间,跟上面的骰子布局很像,但是需要设置项目的自动缩放最简单的网格布局,就是平均分布。在容器里面平均分配空间,跟上面的骰子布局很像,但是需要设置项目的自动缩放
  </div>
</div>
 
</body>
</html>



上一篇: 网页布局实战 下一篇: 百分比布局
毕业设计网             广告联系QQ:45157718(微信同号)