前端开发_HTML5_布局-栅格布局

最新推荐文章于 2024-06-20 12:53:56 发布

魔笛手7

最新推荐文章于 2024-06-20 12:53:56 发布

阅读量4.8k

点赞数 7

分类专栏：前端文章标签： html5 css 栅格布局 grid 栅格grid

本文链接：https://blog.csdn.net/u013185175/article/details/122068327

版权

前端专栏收录该内容

75 篇文章 8 订阅

订阅专栏

栅格布局

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页面，具体的布局页面我们会在后面的讲授过程中继续讲解。

魔笛手7

关注

7
点赞
踩
21

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端开发_HTML5_布局-栅格布局

栅格布局1.引入我们之前学习了多个布局的方式，下面我们一起来学习一种比较重要的布局方式：栅格布局。栅格布局是一种较为特殊的弹性布局，栅格(grid)是一种自适应布局，能根据不同终端自动伸缩容器的宽高。flex根据轴线(axis)布局，看起来像是一维布局；而grid针对网格线(grid line)布局，看起来更像是二维布局。在我们熟知的常用前端框架中都可以发现栅格布局的系统实现，如常用的bootstrap等，我们可以把栅格布局看成是类似Excel表格一样，把整个页面按照不同比例的格子划...
复制链接

扫一扫