Flex布局 VS Grid布局

3,662 阅读8分钟

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

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

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 布局以后,子元素的floatclearvertical-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-directionflex-wrap的简写,默认值为row nowrap

  • align-content

    • 作用:控制多根轴线的对齐方式。如果项目只有一根轴线,该属性是无效的
2.2 应用在项目上的属性
  • order

    • 作用:设置项目的排列顺序,数值越小,排列的顺序越靠前

  • flex-grow

    • 作用:控制项目的放大比例,默认为0

  • flex-shrink

    • 作用:控制项目的缩小比例,默认为1

  • flex-basis

    • 作用:控制项目占据的主轴空间,可设置固定的widthheight,默认为auto

  • flex

    • 作用:flex-growflex-shrinkflex-basis的简写,默认为0 1 auto。后两个属性可选

    • 注意:该属性有两个快捷值: autonone,分别对应1 1 auto0 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条垂直网格线

image.png

image.png

2. 语法属性

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

2.1 应用在容器上的属性

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

  • display: grid;
  • grid-template-columnsgrid-template-rows
  • grid-row-gapgrid-column-gapgrid-gap
  • grid-template-areas
  • grid-auto-flow
  • justify-itemsalign-itemsplace-items
  • justify-contentalign-content place-content
  • grid-auto-columnsgrid-auto-rows
  • grid-template grid

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

  1. display: grid;用来声明盒子为网格布局

  2. grid-template-columns定义每一列的列宽grid-template-rows定义每一行的行高

  3. grid-row-gapgrid-column-gap分别设置行间距列间距grid-gap是它俩的合并简写形式

  4. grid-template-areas用来划定区域

  5. grid-auto-flow用来指定项目的排列顺序,可以通过该属性实现各种各样的排列效果,很实用!

  6. justify-itemsalign-items分别控制单元格内容水平和垂直对齐place-items 是它俩的合并简写形式

  7. justify-contentalign-content 控制整个内容区域容器中水平和垂直位置,place-content 是它俩的合并简写形式

  8. grid-auto-columnsgrid-auto-rows用来设置浏览器自动创建的多余网格列宽和行高

  9. grid-templategrid-template-columnsgrid-template-rowsgrid-template-areas这三个属性的合并简写形式

  10. grid属性是grid-template-rowsgrid-template-columnsgrid-template-areasgrid-auto-rowsgrid-auto-columnsgrid-auto-flow这六个属性的合并简写形式

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


2.2 应用在项目上的属性
  • grid-column-startgrid-column-endgrid-row-startgrid-row-end
  • grid-columngrid-row
  • grid-area
  • justify-selfalign-self place-self

  1. grid-column-startgrid-column-endgrid-row-startgrid-row-end用来指定项目的四个边框在哪根网格线,从而设置项目位置。此设置可以实现各种排列组合,很实用!

  2. grid-column属是grid-column-startgrid-column-end合并简写形式,grid-row属性是grid-row-start属性和grid-row-end合并简写形式

  3. grid-area指定项目放在哪一个区域grid-area还可用作grid-row-startgrid-column-startgrid-row-endgrid-column-end合并简写形式,直接指定项目的位置

  4. justify-self设置单元格内容水平位置,跟justify-items属性的用法完全一致,但只作用于单个项目

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

    place-selfalign-selfjustify-self合并简写形式。


3. Grid的特点

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

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

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

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

三. 两者的对比总结

区别

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

相同

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