HTML栅格布局container,布局&栅格

布局方式

先聊聊布局方面的知识，先列据一个实现三栏水平布局(左右定宽，中间自适应)案列，目前有圣杯布局、双飞翼布局、Flex布局和绝对定位布局的几种经典布局。

圣杯布局 & 双飞翼布局(都是三列左右栏固定中间栏自适应的网页布局)。

相同点：

三列布局，两边定宽，中间自适应；

中间栏要在浏览器中优先展示渲染；

允许任意列的高度最高；

差异点：

双飞翼布局比圣杯布局多创建了一个div，但不用相对布局了

DOM节点结构：

圣杯布局：

main

left

right

.container {

padding: 0 300px 0 200px;

}

.left, .main, .right {

position: relative;

min-height: 130px;

float: left;

}

.left {

left: -200px;

margin-left: -100%;

background: green;

width: 200px;

}

.right {

right: -300px;

margin-left: -300px;

background-color: red;

width: 300px;

}

.main {

background-color: blue;

width: 100%;

}

双飞翼布局：

main

left

right

.left, .main, .right {

float: left;

min-height: 130px;

text-align: center;

}

.left {

margin-left: -100%;

background: green;

width: 200px;

}

.right {

margin-left: -300px;

background-color: red;

width: 300px;

}

.main {

background-color: blue;

width: 100%;

}

.content{

margin: 0 300px 0 200px;

}

双飞翼布局比圣杯布局多使用了一个div，少用大致4个css属性，比圣杯布局思路更直接和间接一点。

Flex弹性布局

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局， Flex 布局将成为现代浏览器的首选方案。

main

left

right

.container{

display: flex;

min-height: 130px;

}

.main{

flex-grow: 1;

background-color: blue;

}

.left{

order: -1;

flex-basis: 200px;

background-color: green;

}

.right{

flex-basis: 300px;

background-color: red;

}

绝对定位布局

绝对定位position: absolute使元素的位置与文档流无关，因此不占据空间。PS：这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

main

left

right

.container{

position: relative;

}

.main,.right,.left{

top: 0;

height: 130px;

}

.main{

margin: 0 300px 0 200px;

background-color: blue;

}

.right{

position: absolute;

width: 300px;

right: 0;

background-color: red;

}

.left{

position: absolute;

width: 200px;

background-color: green;

left: 0;

}

栅格布局

栅格

以规则的网格阵列来指导和规范网页中的版面布局以及信息分布，通俗一点的就是在一个特定区域内划分出有规律的格子，并依靠这些格子进行有规律的版面布局。

栅格布局的作用

提高生产力 ；通过在网格的划分，元素更容易堆放而且在跨浏览器上面具有一致性，使我们可以专心的注意布局而不是兼容上。

具有灵活性 ；无论是什么样的布局，都可以拆分到粒度为一个网格的大小。

支持响应式设计 ；栅格系统本身能很好的和响应式设计结合在一起，或者说，我们的栅格系统是基于响应式设计的。

栅格布局的使用

现大多数UI框架设计上都会设计栅格化系统，比如bootstrap(jquery)、element(vue)、antD(react)等。

Bootstarp

Bootstrap 的栅格化系统采用将页面布局分为12列，再根据页面宽度采用预定义类控制模块占用宽度比例(宽度百分比)的思想，实现响应式布局。

工作规范

container (.container-fluid)> .row > .column ;采用容器内行 (row) 列 (column) 布局方式，.column 必须包含在 .row 中，.row 必须包含在 .container 中；.container 可以包含多个 .row，.row 可以包含多个 .column ；

展示的内容应当放置于 .column类中，并且只有.column可以作为.row的子元素；

使用类似于.row 、.col-xs-4等预定义类，快速创建栅格化布局；

栅格类适用于屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格化类，比如.col-md-*在.container-fludid宽度≥992px时生效；

媒介分类

Bootstrap将屏幕大小分为4类，主要关键点是媒体查询 @media。

/* xs 屏幕大小小于768px */

@media (max-width: 767px) { ... }

/* sm 屏幕最小宽度为768px */

@media (min-width: 768px) { ... }

/* md 屏幕最小宽度为992px */

@media (min-width: 992px) { ... }

/* lg 屏幕最小宽度为1200px */

@media (min-width: 1200px) { ... }

实例

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-8

.col-md-4

.col-md-4

.col-md-4

.col-md-4

.col-md-6

.col-md-6

elementUI

官网中对Layout 布局的定义是： 通过基础的 24 分栏，迅速简便地创建布局.Element是基于vue.js开发的UI框架，其设计的栅格系统也与Bootstrap类似，可选flex方式满足现代浏览器，组件开发的目的都是为了解决基本布局定位的问题。

工作规范

主要组件为 Row 与 Col , 其中 Row 为行布局容器, Col 为列布局容器.

Row 是行布局容器,从功能上来说它的作用是控制内部元素的排列方式，提供 gutter 属性来指定每一栏之间的间隔，将 type 属性赋值为 flex，可以启用 flex 布局；

Col 是列布局容器,通过 Col 组件的 span 属性我们就可以自由地组合布局，提供 offset 属性指定分栏偏移的栏数等。

媒介分类

参照了 Bootstrap 的 响应式设计，预设了五个响应尺寸：

xs <768px

sm ≥768px

md ≥992px

lg ≥1200px

xl ≥1920px

实列

antD

antD是Ant Design 团队基于 React 开发的一套企业级后台UI框架，其栅格整个设计建议区域按照 24 等分的原则进行划分

工作规范

支持 Flex 布局，允许子元素在父节点内的水平对齐方式 - 居左、居中、居右、等宽排列、分散排列。子元素与子元素之间，支持顶部对齐、垂直居中对齐、底部对齐的方式。同时，支持使用 order 来定义元素的排列顺序

通过 row 在水平方向建立一组 column(简写col)

你的内容应当放置于 col 内，并且，只有 col 可以作为 row 的直接元素

栅格系统中的列是指1到24的值来表示其跨越的范围。例如，三个等宽的列可以使用 .col-8 来创建

如果一个 row 中的 col 总和超过 24，那么多余的 col 会作为一个整体另起一行排列

媒介规范

参照 Bootstrap 的 响应式设计，预设六个响应尺寸：

xs <576px

sm ≥576px

md ≥768px

lg ≥992px

xl ≥1200px

xxl ≥1600px

实例

import { Row, Col } from 'antd';

ReactDOM.render(

col-8col-8col-6 col-offset-6col-6 col-offset-6col-12 col-offset-6

,

mountNode

);

怎么实现一个基本栅格化？

1. 首先思考栅格的组成？

通常一个基本的栅格化系统包括：

container: 包裹整个栅格系统的容器

rows: 行

columns: 列

gutters: 各列的间的空隙

2. 创建容器 (The Container)

为了给整个栅格系统设置宽度，我们需要一个容器。容器的宽度通常为100%，但你可能希望为更大的显示器设置最大宽度max-width。

.grid-container {

width : 100%;

max-width : 1200px;

}

3. 创建行 (The Row)

行元素用于防止里面的列( column )溢出到其他的行。通常会使用clearfix来清除浮动，因为我们是通过浮动来制作栅格系统的。

/*-- 清除浮动 -- */

.row:before,

.row:after {

content:"";

display: table ;

clear:both;

}

4. 创建列 (The Column)

列元素是栅格系统的核心，也是最复杂的一部分。因为列的定位可以有很多实现方式，同时还需要考虑它的宽度以及响应式设计等因素。

列的位置

Floats 、 inline-blocks 、 display-table 、 display-flex 他们都可以实现栅格布局中，列的定位。先选取使用float，如果列都是空的，浮动的列都会贴在彼此的顶部。为了避免这种情况：

[class*='col-'] {

float: left;

min-height: 1px;

}

列的宽度

由于容器总宽度是100%，我们想要6列，所以每列宽度为：100 / 6 = 16.66

[class*='col-'] {

float: left;

min-height: 1px;

width: 16.66%;

}

这里我们把一行分成六列，通过简单的计算，还可以定义列的多种宽度。

.col-1 {

width: 16.66%;

}

.col-2 {

width: 33.33%;

}

.col-3 {

width: 50%;

}

.col-4 {

width: 66.664%;

}

.col-5 {

width: 83.33%;

}

.col-6 {

width: 100%;

}

列的间隙 (Column Gutters)

由于列的宽度单位是响应式的百分比(%)，我们给列元素的间距是固定单位的padding(px单位)，为了避免复杂的计算，我们规定所有的盒子模型为 border-box 类型。

[class*='col-'] {

/*-- 将栅格系统里的列元素设为 border box --*/

box-sizing: border-box;

float: left;

min-height: 1px;

width: 16.66%;

/*-- 设置间隙 --*/

padding: 12px;

}

5. 增加响应式

为了适配更多分辨率的布局，我们只需改变列的宽度。

比如当屏幕宽度小于1000px时，为了布局更简洁，我们使用两倍列的宽度，一行六列变为了一行三列。

@media all and (max-width:1000px){

.col-1{ width: 33.33%; }

.col-2{ width: 50%; }

.col-3{ width: 100%; }

.col-4{ width: 100%; }

.col-5{ width: 100%; }

.col-6{ width: 100%; }

.row .col-2:last-of-type{

width: 100%;

}

.row .col-5 ~ .col-1{

width: 100%;

}

}

当屏幕宽度比1000px还小时

@media all and (max-width:700px){

.col-1{ width: 50%; }

.col-2{ width: 100%; }

.col-3{ width: 100%; }

.col-4{ width: 100%; }

.col-5{ width: 100%; }

.col-6{ width: 100%; }

}

6. 完成Completed!

Document

.grid-container {

width: 100%;

max-width: 1200px;

}

/*-- 使用 cleafix 清除浮动 -- */

.row:before,

.row:after {

content: "";

display: table;

clear: both;

}

[class*='col-'] {

float: left;

min-height: 1px;

width: 16.66%;

/*-- 设置列的左右间隙 -- */

padding: 12px;

box-sizing: border-box;

background-color: #FFDCDC;

}

.col-1 { width: 16.66%; }

.col-2 { width: 33.33%; }

.col-3 { width: 50%; }

.col-4 { width: 66.66%; }

.col-5 { width: 83.33%; }

.col-6 { width: 100%; }

.outline,

.outline * {

outline: 1px solid #F6A1A1;

}

/*-- 列的额外内容样式 --*/

[class*='col-']>p {

background-color: #FFC2C2;

padding: 0;

margin: 0;

text-align: center;

color: white;

}

@media all and (max-width:1000px) {

.col-1 { width: 33.33%; }

.col-2 { width: 50%; }

.col-3 { width: 100%; }

.col-4 { width: 100%; }

.col-5 { width: 100%; }

.col-6 { width: 100%; }

.row .col-2:last-of-type { width: 100%; }

.row .col-5~.col-1 { width: 100%; }

}

@media all and (max-width:700px) {

.col-1 { width: 50%; }

.col-2 { width: 100%; }

.col-3 { width: 100%; }

.col-4 { width: 100%; }

.col-5 { width: 100%; }

.col-6 { width: 100%; }

}

col-1

col-1

col-1

col-1

col-1

col-1

col-2

col-2

col-2

col-3

col-3

col-4

col-2

col-5

col-1

col-6

>1000px

<1000px

<700px