通用实战

Flex Box页面布局实战课程-基本网格布局

时间:2019/1/21 12:13:08  作者:互联网  来源:网络转载  查看:36895  评论:0
内容摘要:最简单的网格布局,就是平均分布。在容器里面平均分配空间,跟骰子布局很像,但是需要设置项目的自动缩放。html代码如下<!DOCTYPE><html><head><meta http-equiv="Content-Type&quo...
最简单的网格布局,就是平均分布。在容器里面平均分配空间,跟骰子布局很像,但是需要设置项目的自动缩放。
Flex_Box页面布局实战课程-基本网格布局
html代码如下

<!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 class="rongqi01">

  <div class="xm01">01</div>

  <div class="xm01">02</div>

</div>

 

<div class="rongqi01">

     <div class="xm01">01</div>

    <div class="xm01">02</div>

    <div class="xm01">03</div>

</div>

 

<div class="rongqi01">

  <div class="xm02">flex-direction属性决定主轴的方向(即项目的排列方向):(左中右    上中下)</div>

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

  </div>

</div>

 

</body>

</html>






上一篇:Flex Box页面布局实战课程-百分比布局
下一篇:没有了
相关评论
评论者:      验证码:  点击获取验证码
本类推荐
咨询QQ/微信:45157718 点击这里给我发消息 | 电话:13516821613 | 浙江杭州余杭区东港路118号雷恩科技创新园 | 网站支持:杭州摇亿网络科技 | 浙ICP备06056032号-6 |