 |
位置：电子教程 > Flex Box实战教程 (如果看不到内容请使用360浏览器) | 推荐学习资源 |
|
位置：电子教程 > Flex Box实战教程 (如果看不到内容请使用360浏览器) | 推荐学习资源 |
| 当前阅读教程：Flex Box实战教程 > 基本网格布局 | |
| 阅读(22555525) 收藏 赞(5685) 分享 | |
| 上一篇： 网页布局实战 | 下一篇： 百分比布局 |
|
最简单的网格布局，就是平均分布。在容器里面平均分配空间，跟上面的骰子布局很像，但是需要设置项目的自动缩放。
代码如下： <!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> |
|
| 上一篇： 网页布局实战 | 下一篇： 百分比布局 |
