传统模型、Flex和Grid布局
说到布局，大多数人都会想到传统的模型布局，但在实际开发过程中会显得比较不方便，就例如实现垂直居中这一问题上；而 flex 弹性布局的出现使得现阶段网页开发的布局变得更加轻便，现在更是开发的布局首选。
这篇文章主要是让我们理解grid、flex和传统模型这三种布局的概念及其区别，并且会在之后的文章中对这三种布局进行实践。
由于本文重点在告诉你这些布局的特点以及构成方案，想要具体教程的，在这附上阮一峰大大的链接（本文许多专业词汇的理解也是引用以下文章）：
CSS Grid 网格布局教程
Flex 布局教程：语法篇
在说传统模型布局前，你必须要深刻了解什么是盒模型，在我的另一篇文章中针对盒模型有详细的说明： 标准盒模型和IE盒模型
传统模型布局分三种模型，并且这三种模型紧密联系：
因此，我们可以得出传统模型布局的具体操作方案为：
flex布局是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
flex布局的作用仅在设定 display:flex 属性的元素以及它的所有子元素上，并且子元素的 float 、 clear 和 vertical-align 属性将失效。其中所设定的元素又称为 容器 （flex container），子元素称为 项目 （flex item）。
容器的设定存在两根轴，水平的主轴（main axis）和垂直的交叉轴（cross axis）。项目默认沿主轴排列。
在实际开发过程中，习惯用：
grid布局又叫网格布局，它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。
grid和flex布局十分相似，但却有极大的不同。Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是 一维布局 。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是 二维布局 。
在二维布局里，正常情况下， n 行和 m 列会产生 n x m 个单元格。 n 行有 n + 1 根水平网格线， m 列有 m + 1 根垂直网格线。grid布局的作用仍然在 容器 和 项目 中。
可以看出，二维的布局跟一维有十分相似的，即一维时（flex）你只能规定一个方向（轴）而要充分考虑另外一个方向的排版，而二维则包括了两个轴，因此grid布局更加地简便。
在9102年的今天，grid布局并不能完全兼容所有浏览器，又或者说需要的浏览器版本较高，但它已经可以普遍兼容了，各位可以在日后的工作中考虑是否应用。
ZESTRON
2024-09-04 广告
