上篇文章在写前端经典布局方案时,提到了Flex
和Grid
技术,接下来就带着大家一块去探讨一下Flex
和Grid
到底有什么不同。
先大体介绍一下两者的作用:
Flex布局:
Flexible Box
的缩写,也成为弹性布局
。它是2009年由W3C
提出的新的布局方案,可以响应式地实现各种页面布局,目前Flex
技术已经得到了所有浏览器的支持
Grid布局:
Grid 布局
又称为网格布局
,是微软于 2010 年提出的一种新的布局方式,于2016 年提交了该布局的草案。经过近几年发展,兼容性越来越好
一. Flex布局
想必很多小伙伴对于Flex
布局已经很熟悉了,接下来从基本概念、语法属性两方面去介绍Flex
的使用
1.基本概念
容器
:任何一个容器(盒子)都可以指定为Flex容器
,也就是说,想要使用Flex
,前提条件是把这个盒子声明为Flex容器
容器成员(项目)
:Flex容器
中的所有子元素我们称之为容器成员
,也叫作项目(item)
.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
布局的学习时间成本要大一些
相同
- 两者均是目前布局方案中的主流,因其各自的特点,应用的场景也不尽相同