前端开发_HTML5_布局-栅格布局
栅格布局1.引入我们之前学习了多个布局的方式，下面我们一起来学习一种比较重要的布局方式：栅格布局。栅格布局是一种较为特殊的弹性布局，栅格(grid)是一种自适应布局，能根据不同终端自动伸缩容器的宽高。flex根据轴线(axis)布局，看起来像是一维布局；而grid针对网格线(grid line)布局，看起来更像是二维布局。在我们熟知的常用前端框架中都可以发现栅格布局的系统实现，如常用的bootst
·
栅格布局
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页面，具体的布局页面我们会在后面的讲授过程中继续讲解。
权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区
更多推荐
7
0- 0
已为社区贡献1条内容
所有评论(0)