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

最新推荐文章于 2024-08-16 14:53:15 发布

黄菊华老师

最新推荐文章于 2024-08-16 14:53:15 发布

阅读量886

点赞数

分类专栏： flex box 文章标签： flex视频教程 flex box实战教程

本文链接：https://blog.csdn.net/u013818205/article/details/87929048

版权

flex box 专栏收录该内容

34 篇文章 1 订阅

订阅专栏

最简单的网格布局，就是平均分布。在容器里面平均分配空间，跟上面的骰子布局很像，但是需要设置项目的自动缩放。
在这里插入图片描述
微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：https://edu.csdn.net/topic/huangjuhua

实战代码

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

实战效果图
在这里插入图片描述