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

效果图

代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>基本网格布局:黄菊华讲师</title>
</head>

<body>

<style>
.rongqi01{ background-color:#CCC; display:flex; flex-direction:row; margin:5px;}
.xm01{ background-color:#39F; width:100%; margin:5px;}
.xm02{ background-color:#39F; width:20%; margin:5px;}
.xm03{ background-color:#39F; width:80%; 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="xm03">最简单的网格布局，就是平均分布。在容器里面平均分配空间，跟上面的骰子布局很像，但是需要设置项目的自动缩放最简单的网格布局，就是平均分布。在容器里面平均分配空间，跟上面的骰子布局很像，但是需要设置项目的自动缩放最简单的网格布局，就是平均分布。在容器里面平均分配空间，跟上面的骰子布局很像，但是需要设置项目的自动缩放</div>
</div>


</body>
</html>

欢迎大家学习我的视频课程：Flex Box页面布局实战课程(网页移动端微信等)
https://edu.csdn.net/course/detail/16197
Flex Box页面布局实战课程-基本网格布局