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

作者：2023面试高手 | 2024-03-23 13:31:03

踩

html栅格布局

栅格布局

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

本文内容由网友自发贡献，转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/295469