栅格布局

1.引入

我们之前学习了多个布局的方式,下面我们一起来学习一种比较重要的布局方式:栅格布局。栅格布局是一种较为特殊的弹性布局,栅格(grid)是一种自适应布局,能根据不同终端自动伸缩容器的宽高。flex根据轴线(axis)布局,看起来像是一维布局;而grid针对网格线(grid line)布局,看起来更像是二维布局。

在我们熟知的常用前端框架中都可以发现栅格布局的系统实现,如常用的bootstrap等,我们可以把栅格布局看成是类似Excel表格一样,把整个页面按照不同比例的格子划分为不同的内容,然后我们按照划分的比例,来实现页面的布局。

2.栅格布局

(1)、栅格布局中常用的样式属性

栅格布局常用的样式属性
    我们知道栅格布局是一种比较特殊的弹性布局,所以我们在编写栅格布局的时候会使用到比较多的弹性布局的内容,下面我们逐一列举常用的属性。


display:flex;                //设置弹性布局容器
flex flow:row nowrap;        //设置flex容器水平方向排布,在内容比较多且排布不下的时候不允许换行
justfy-content:space-around; //排布内容的时候均匀排布,并且内容之间会存在这均匀的空格

flex-shrink:1;               //弹性的收缩比例
flex-grow:数值;              //弹性的扩展比例,一般设置的数值就是占据宽度的比例数


(2)、基本的栅格布局

        这里我们把每一个div所占据的区域划分为一个栅格内容,按照不同的比例划分出不同比例的栅格信息,然后把整个栅格内容按照所示的内容进行一个套用。我们先把需要的模板写出来,代码和实现的效果图如下:

<meta name="viewport"
		content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}

			/**定义基本的弹性布局内容**/
			.grid {
				display: flex;
				flex-flow: row nowrap;
				justify-content: space-around;
			}

			/**按照比例定义栅格的宽度和收缩比例,这里我们把他划分为8个区域**/
			.grid-cell-1,
			.grid-cell-2,
			.grid-cell-3,
			.grid-cell-4,
			.grid-cell-5,
			.grid-cell-6,
			.grid-cell-7,
			.grid-cell-8 {
				flex-shrink: 1;
				/*设置收缩比率*/
				padding: 3px;
				/*设置内边距*/
			}

			/**设置扩展比例,也可以认为是所占据的比例的数量**/
			.grid-cell-1 {
				flex-grow: 1;
				/*占据比例数量的1/8*/
			}

			.grid-cell-2 {
				flex-grow: 2;
				/*占据比例数量的2/8*/
			}

			.grid-cell-3 {
				flex-grow: 3;
				/*占据比例数量的3/8*/
			}

			.grid-cell-4 {
				flex-grow: 4;
				/*占据比例数量的4/8*/
			}

			.grid-cell-5 {
				flex-grow: 5;
				/*占据比例数量的5/8*/
			}

			.grid-cell-6 {
				flex-grow: 6;
				/*占据比例数量的6/8*/
			}

			.grid-cell-7 {
				flex-grow: 7;
				/*占据比例数量的7/8*/
			}

			.grid-cell-8 {
				flex-grow: 8;
				/*占据比例数量的8/8*/
			}

			.box {
				background-color: #00AA00;
				height: 50px;
				width: 100%;
			}
</style>

<body>
	    <div class="grid">
			<div class="grid-cell-1">
				<div class="box">
				</div>
			</div>
			<div class="grid-cell-1">
				<div class="box">
				</div>
			</div>
			<div class="grid-cell-1">
				<div class="box">
				</div>
			</div>
			<div class="grid-cell-1">
				<div class="box">
				</div>
			</div>
			<div class="grid-cell-1">
				<div class="box">
				</div>
			</div>
			<div class="grid-cell-1">
				<div class="box">
				</div>
			</div>
			<div class="grid-cell-1">
				<div class="box">
				</div>
			</div>
			<div class="grid-cell-1">
				<div class="box">
				</div>
			</div>
		</div>
		
		<div class="grid">
			<div class="grid-cell-2">
				<div class="box">
				</div>
			</div>
			<div class="grid-cell-2">
				<div class="box">
				</div>
			</div>
			<div class="grid-cell-2">
				<div class="box">
				</div>
			</div>
			<div class="grid-cell-2">
				<div class="box">
				</div>
			</div>
		</div>
		
		<div class="grid">
			<div class="grid-cell-4">
				<div class="box">
				</div>
			</div>
			<div class="grid-cell-4">
				<div class="box">
				</div>
			</div>
		</div>
		
		<div class="grid">
			<div class="grid-cell-8">
				<div class="box">
				</div>
			</div>
		</div>
		<div class="grid">
			<div class="grid-cell-2">
				<div class="box">
				</div>
			</div>
			<div class="grid-cell-6">
				<div class="box">
				</div>
			</div>
		</div>
		<div class="grid">
			<div class="grid-cell-3">
				<div class="box">
				</div>
			</div>
			<div class="grid-cell-5">
				<div class="box">
				</div>
			</div>
		</div>
		<div class="grid">
			<div class="grid-cell-5">
				<div class="box">
				</div>
			</div>
			<div class="grid-cell-3">
				<div class="box">
				</div>
			</div>
		</div>
		<div class="grid">
			<div class="grid-cell-6">
				<div class="box">
				</div>
			</div>
			<div class="grid-cell-2">
				<div class="box">
				</div>
			</div>
		</div>
	</body>

 通过上述的布局方式,我们几乎可以布局出任何样式的h5页面,具体的布局页面我们会在后面的讲授过程中继续讲解。

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐