Flex布局 VS Grid布局

上篇文章在写前端经典布局方案时，提到了Flex和Grid技术，接下来就带着大家一块去探讨一下Flex和Grid到底有什么不同。

先大体介绍一下两者的作用：

Flex布局： Flexible Box的缩写，也成为弹性布局。它是2009年由W3C提出的新的布局方案，可以响应式地实现各种页面布局，目前Flex技术已经得到了所有浏览器的支持
Grid布局： Grid 布局又称为网格布局，是微软于 2010 年提出的一种新的布局方式，于2016 年提交了该布局的草案。经过近几年发展，兼容性越来越好

一. Flex布局

想必很多小伙伴对于Flex布局已经很熟悉了，接下来从基本概念、语法属性 两方面去介绍Flex的使用

1.基本概念

容器：任何一个容器(盒子)都可以指定为Flex容器，也就是说，想要使用Flex，前提条件是把这个盒子声明为Flex容器

容器成员（项目）：Flex容器中的所有子元素我们称之为容器成员，也叫作项目(item)

css 复制代码

.box {
  /* 这样就把.box这个盒子声明为一个Flex容器了 */
  display: flex;
}

注意，设为 Flex 布局以后，子元素的float、clear和vertical-align等属性都将失效。

Flex容器默认存在两条轴：

水平的主轴
垂直的交叉轴

Flex布局中的项目，默认沿主轴排列

让人感觉难的，并不是对Flex布局的理解，而是里面诸多的语法属性

2. 语法属性

2.1 应用在`容器`上的属性

flex-direction
- 作用：设置主轴的方向
- 取值：
  - row（默认值）：主轴为水平方向，起点在左端
  - row-reverse：主轴为水平方向，起点在右端
  - column：主轴为垂直方向，起点在上沿
  - column-reverse：主轴为垂直方向，起点在下沿
flex-wrap
- 作用：控制项目在主轴上如何换行
- 取值：
  - nowrap：不换行
  - wrap：换行，第一行在上面
  - wrap-reverse：换行，第一行在下面
justify-content
- 作用：控制项目在主轴上的对齐方式
- 取值：
  - flex-start（默认值）：左对齐
  - flex-end：右对齐
  - center：居中
  - space-between：两端对齐，项目之间的间隔相等
  - space-around：两侧对齐，每个项目两侧的间隔相等，项目之间的间隔比项目与边框的间隔大一倍
align-items
- 作用：设置项目在交叉轴上的对齐方式
- 取值：
  - flex-start：交叉轴的起点对齐
  - flex-end：交叉轴的终点对齐
  - center：交叉轴的中点对齐
  - baseline: 项目的第一行文字的基线对齐
  - stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度

当然，Flex容器上还有两个不太常用的属性，分别是：

flex-flow
- 作用：是flex-direction和flex-wrap的简写，默认值为row nowrap
align-content
- 作用：控制多根轴线的对齐方式。如果项目只有一根轴线，该属性是无效的

2.2 应用在`项目`上的属性

order
- 作用：设置项目的排列顺序，数值越小，排列的顺序越靠前
flex-grow
- 作用：控制项目的放大比例，默认为0
flex-shrink
- 作用：控制项目的缩小比例，默认为1
flex-basis
- 作用：控制项目占据的主轴空间，可设置固定的width和height，默认为auto
flex
- 作用：flex-grow、flex-shrink 和 flex-basis的简写，默认为0 1 auto。后两个属性可选
- 注意：该属性有两个快捷值： auto和none，分别对应1 1 auto和0 0 auto，建议优先使用快捷值写法
align-self
- 作用：设置项目的对齐方式
- 取值：除了auto，其它取值均与align-items属性取值完全一致
  - auto（默认值）：表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
  - flex-start
  - flex-end
  - center
  - baseline
  - stretch

3. `Flex`的特点

从以上的语法不难看出，Flex布局拥有主轴和交叉轴

所有的项目都是依托于两个轴进行位置排列的，所以可以把Flex布局看成是一种"轴线布局"

从维度的角度上看，Flex布局也是一维布局

二. Grid布局

1. 基本概念

Grid布局跟Flex布局一样，也存在容器和项目的概念。
除此之外，Grid布局中还有行、列、单元格、网格线的概念

1.1 行和列

容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）

1.2 单元格

容器中行和列的交汇点叫做单元格（cell）

1.3 网格线

水平网格线划分出行，垂直网格线划分出列

x 行有 x + 1 条水平网格线；y 列有 y + 1 条垂直网格线

如图：2行有3条水平网格线，3列有4条垂直网格线

2. 语法属性

⚠️ Grid布局中关于容器和项目的属性很多很多！！！胆小勿入！！！ ⚠️

2.1 应用在`容器`上的属性

中国人不骗中国人，相信我，你一定会崩溃的 🤩

display: grid;
grid-template-columns、grid-template-rows
grid-row-gap、grid-column-gap、grid-gap
grid-template-areas
grid-auto-flow
justify-items、align-items、place-items
justify-content、align-content 、place-content
grid-auto-columns、grid-auto-rows
grid-template 、grid

言简意赅，给大家以最舒服、最简洁的方式总结一下（轻点喷...）

display: grid;用来声明盒子为网格布局
grid-template-columns定义每一列的列宽，grid-template-rows定义每一行的行高
grid-row-gap和grid-column-gap分别设置行间距 和列间距 ，grid-gap是它俩的合并简写形式
grid-template-areas用来划定区域
grid-auto-flow用来指定项目的排列顺序 ，可以通过该属性实现各种各样的排列效果，很实用！
justify-items和align-items分别控制单元格内容 的水平和垂直对齐 ，place-items 是它俩的合并简写形式
justify-content和align-content 控制整个内容区域 在容器中 的水平和垂直 位置，place-content 是它俩的合并简写形式
grid-auto-columns和grid-auto-rows用来设置浏览器自动创建的多余网格 的列宽和行高
grid-template是grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式
grid属性是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的合并简写形式

第9和第10项，因为合并的属性比较多，从易读、易写的角度上看，不建议使用合并属性

2.2 应用在`项目`上的属性

grid-column-start、grid-column-end、grid-row-start、grid-row-end
grid-column、grid-row
grid-area
justify-self、align-self 、place-self

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指定项目放在哪一个区域 。grid-area还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写 形式，直接指定项目的位置
justify-self设置单元格内容 的水平位置 ，跟justify-items属性的用法完全一致，但只作用于单个项目

align-self设置单元格内容 的垂直位置 ，跟align-items属性的用法完全一致，也是只作用于单个项目

place-self是align-self和justify-self的合并简写形式。

3. `Grid`的特点

其实从Grid布局的基本概念可以看出，Grid 布局将容器划分成"行"和"列"，并产生单元格，然后指定"项目所在"的单元格，可以看作是**二维布局**

由于可以主动的去指定项目所处的区域（位置），所以我们在进行复杂结构布局时，Grid布局很显然要比Flex布局的操作性强，更容易也更方便的实现各种复杂且好看的布局

虽然从布局的操作性和复杂度上来看，Grid布局要比Flex布局强大！

但是你不能避免Grid布局这个"老六"所带来的一些浏览器兼容性、响应式设计、性能优化等一系列的问题

三. 两者的对比总结

区别

Flex布局是一维布局，Grid布局是二维布局
从布局的操作性和复杂度上看，Grid布局要强于Flex布局
Grid布局具有兼容性问题，不友好
从学习时间成本上看，因Grid布局的属性要远多于Flex布局，所以Grid布局的学习时间成本要大一些

相同

两者均是目前布局方案中的主流，因其各自的特点，应用的场景也不尽相同

Flex布局 VS Grid布局

一. Flex布局

1.基本概念

2. 语法属性

2.1 应用在容器上的属性

2.2 应用在项目上的属性

3. Flex的特点

二. Grid布局

1. 基本概念

1.1 行和列

1.2 单元格

1.3 网格线

2. 语法属性

2.1 应用在容器上的属性

2.2 应用在项目上的属性

3. Grid的特点

三. 两者的对比总结

区别

相同

2.1 应用在`容器`上的属性

2.2 应用在`项目`上的属性

3. `Flex`的特点

2.1 应用在`容器`上的属性

2.2 应用在`项目`上的属性

3. `Grid`的特点