传统模型、Flex和Grid布局

前言

说到布局，大多数人都会想到传统的模型布局，但在实际开发过程中会显得比较不方便，就例如实现垂直居中这一问题上；而flex弹性布局的出现使得现阶段网页开发的布局变得更加轻便，现在更是开发的布局首选。

这篇文章主要是让我们理解grid、flex和传统模型这三种布局的概念及其区别，并且会在之后的文章中对这三种布局进行实践。

由于本文重点在告诉你这些布局的特点以及构成方案，想要具体教程的，在这附上阮一峰大大的链接（本文许多专业词汇的理解也是引用以下文章）：
CSS Grid 网格布局教程
Flex 布局教程：语法篇

---

传统模型布局

在说传统模型布局前，你必须要深刻了解什么是盒模型，在我的另一篇文章中针对盒模型有详细的说明：标准盒模型和IE盒模型

传统模型布局分三种模型，并且这三种模型紧密联系：

1. 流动模型（Flow）
   流动模型是默认的网页布局模式，即块级元素自上而下按顺序垂直延伸分布，因为在默认情况下块级元素宽度总是100%；行内元素都会在所处的包含元素内从左到右水平分布显示。
2. 浮动模型 (Float)
   当元素css属性中设置了float，则它将依照浮动的位置进行特定的定位。
3. 层模型（Layer）
   层模型即三种position形式：
   1.position:relative（相对定位）
   当元素设置了该属性，则它的位置会相对在父元素以及兄弟元素间进行偏移。
   2.position: absolute(绝对定位)
   将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块（就是它前面的div并没有设置定位的属性），则相对于body元素，即相对于浏览器窗口。
   3.position: fixed（固定定位）
   与absolute相似，它只相对于浏览器的视口进行定位，而不会受其他块级元素的影响。

因此，我们可以得出传统模型布局的具体操作方案为：

盒模型+display属性+float属性+position属性

---

flex布局

flex布局是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
flex布局的作用仅在设定display:flex属性的元素以及它的所有子元素上，并且子元素的float、clear和vertical-align属性将失效。其中所设定的元素又称为容器（flex container），子元素称为项目（flex item）。

容器的设定存在两根轴，水平的主轴（main axis）和垂直的交叉轴（cross axis）。项目默认沿主轴排列。

flex容器

• flex-direction：指定项目的轴方向
• flex-wrap：项目是否换行
• flex-flow：flex-direction和flex-wrap的合成形式
• justify-content：定义了项目在主轴上的对齐方式
• align-items：定义项目在交叉轴上如何对齐
• align-content：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

flex项目

• order：定义项目的排列顺序。数值越小，排列越靠前，默认为0
• flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
• flex-shrink：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
• flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
• flex：flex-grow,flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
• align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性

在实际开发过程中，习惯用：

容器属性：
    display:flex/inline-flex;
    flex-flow、justify-content、align-items
项目属性：
    flex、order、align-self

---

Grid布局

grid布局又叫网格布局，它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。

Grid布局和Flex布局的区别

grid和flex布局十分相似，但却有极大的不同。Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。

在二维布局里，正常情况下，n行和m列会产生n x m个单元格。n行有n + 1根水平网格线，m列有m + 1根垂直网格线。grid布局的作用仍然在容器和项目中。

grid容器

• display: grid/inline-grid：指定容器采用grid布局
• grid-template-columns：定义每一列的列宽
• grid-template-rows：定义每一行的行高
• grid-row-gap：设置行与行的间隔（行间距）
• grid-column-gap：设置列与列的间隔（列间距）
• grid-gap：grid-row-gap和grid-column-gap的合成简写
• grid-template-areas：用于定义区域
• grid-auto-flow：子元素的放置顺序，默认的放置顺序是"先行后列"，即先填满第一行，再开始放入第二行
• justify-items：设置单元格内容的水平位置（左中右）
• align-items：设置单元格内容的垂直位置（上中下）
• place-items：justify-items和align-items的合成简写

grid项目

• grid-column-start：左边框所在的垂直网格线
• grid-column-end：右边框所在的垂直网格线
• grid-row-start：上边框所在的水平网格线
• grid-row-end：下边框所在的水平网格线
• grid-column：grid-column-start和grid-column-end的简写
• grid-row：grid-row-start和grid-row-end的简写
• grid-area：指定项目放在哪一个区域
• justify-self：设置单元格内容的水平位置（左中右）
• align-self：设置单元格内容的垂直位置（上中下）
• place-self：align-self属性和justify-self属性的合并简写形式

可以看出，二维的布局跟一维有十分相似的，即一维时（flex）你只能规定一个方向（轴）而要充分考虑另外一个方向的排版，而二维则包括了两个轴，因此grid布局更加地简便。

在9102年的今天，grid布局并不能完全兼容所有浏览器，又或者说需要的浏览器版本较高，但它已经可以普遍兼容了，各位可以在日后的工作中考虑是否应用。