布局&栅格

Posted 2023-03-15

参考技术A

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

相同点：

差异点：

DOM节点结构：

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

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

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

栅格

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

栅格布局的作用

栅格布局的使用

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

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

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

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

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

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

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

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

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

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

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

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

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

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

列的位置

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

列的宽度

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

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

列的间隙 (Column Gutters)

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

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

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

当屏幕宽度比1000px还小时