likes
comments
collection
share

Flex布局 VS Grid布局

作者站长头像
站长
· 阅读数 11

上篇文章在写前端经典布局方案时，提到了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条垂直网格线

Flex布局 VS Grid布局

Flex布局 VS Grid布局

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

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

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

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

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

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

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

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

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

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

  9. grid-template是grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式

  10. 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

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

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

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

  4. 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布局的学习时间成本要大一些

相同

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