Flex 弹性布局

Flex的概念

Flex是 Flexible Box 的缩写,就是弹性盒子布局的意思

  • 弹性盒子是一种用于按行或按列布局元素的一维布局方法;

  • 元素可以膨胀以填充额外的空间, 也可收缩以适应更小的空间;

  • 使用Flexbox来进行布局的方案称之为Flex布局(flex layout)

两对象 | 两轴 | 两线

两对象:flex container(容器)和flex item(项目)

flex container(容器)

设置 display 属性为 flex 或者 inline-flex 可以成为 flex container

  • flex: flex container 以 block-level 形式存在

  • inline-flex: flex container 以 inline-level 形式存在

flex item(项目)

flex container中的子元素变成了flex item时, 具备一下特点:

  • flex item的布局将受flex container属性的设置来进行控制和布局;

  • flex item不再严格区分块级元素和行内级元素;

  • flex item默认情况下是包裹内容的, 但是可以设置宽度和高度;

模型(两轴两线)

学习flex布局需要明白主轴交叉轴的概念

采用flex布局的元素,称为容器 ( flex container),它的所有子元素都是容器的项目(flex item)

容器默认存在两根轴水平的主轴(main axis)垂直的交叉轴(cross axis)

  • 主轴的开始位置(与边框的交叉点)叫做 main start ,结束位置叫做 main end
  • 交叉轴的开始位置叫做 cross start ,结束位置叫做 cross end

img

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size

给父级容器(flex container)设置的属性

flex-direction(主轴方向)

flex items 默认都是沿着 main axis(主轴)从 main start 开始往 main end 方向排布

我们可以通过设置主轴和交叉轴来控制子元素的排序方式。

flex-direction 可以设置 main axis 的方向,有 4 个取值

  • row(默认值)、row-reverse、column、column-reverse

image.png

flex-wrap(换行问题)

默认情况下,项目在水平方向上都排在一条线(又称”轴线”)上。

flex-wrap属性用来解决一条轴线排不下,如何换行的问题。

flex-wrap 设置 flex container 是单行展示or多行展示,取值有3个:

  • nowrap、 wrap、 wrap-reverse
  1. nowrap(默认):单行,不换行

  2. wrap:多行

    image.png

  3. wrap-reverse:多行(对比 wrap,cross start 与 cross end 反转)

    image.png

flex-flow(方向和换行的简写)

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap

书写随意,flex-direction属性和flex-wrap属性先后位置任意,都可省略(取默认值)

justify-content(与主轴的对齐方式)

justify-content定义 flex items(项目) 在 main axis(主轴) 上的对齐方式,取值有:

  • flex-start(默认值):与 main start 对齐
  • flex-end:与 main end 对齐
  • center:居中对齐

29fb3d389192417e9051022730030a07_tplv-k3u1fbpfcp-zoom-in-crop-mark_3024_0_0_0.gif

  • space-between

    flex items 之间的距离相等

    与 main start、main end两端对齐

  • space-around

    flex items 之间的距离相等

    flex items 与 main start、main end 之间的距离是 flex items 之间距离的一半

  • space-evenly

    flex items 之间的距离相等

    flex items 与 main start、main end 之间的距离 等于 flex items 之间的距离

align-items(与交叉轴的对齐方式)

align-items属性定义项目在交叉轴上如何对齐,取值有:

  • normal:在弹性布局中,效果和stretch一样
  • stretch:当 flex items 在 cross axis 方向的 size 为 auto 时,会自动拉伸至填充 flex container
  • flex-start:与 cross start 对齐
  • flex-end:与 cross end 对齐
  • center:居中对齐
  • baseline:与基准线对齐

image.png

align-content(多根轴线 在 交叉轴上的对齐方式)

align-content属性定义了多根轴线 在 cross axis 上的对齐方式,用法与 justify-content 类似

如果项目只有一根轴线,该属性不起作用。取值有:

  • stretch(默认值):与 align-items 的 stretch 类似

  • flex-start:与 cross start 对齐

  • flex-end:与 cross end 对齐

  • center:居中对齐

  • space-between

    flex items 之间的距离相等

    与 cross start、cross end两端对齐

  • space-around

    flex items 之间的距离相等

    flex items 与 cross start、cross end 之间的距离是 flex items 之间距离的一半

  • space-evenly

    flex items 之间的距离相等

    flex items 与 cross start、cross end 之间的距离 等于 flex items 之间的距离

image.png

给子级项目(flex item)设置的属性

align-self(设置不一样的对齐方式)

flex items 的align-self属性允许单个项目有与其他项目不一样的对齐方式,可以通过 align-self 覆盖 flex container 设置的 align-items,取值有:

  • auto(默认值):遵从 flex container 的 align-items 设置
  • stretch、flex-start、flex-end、center、baseline,效果跟 align-items 一致

image.png

order(排列顺序)

order属性定义项目的排列顺序

数值越小,排列越靠前,默认为0。 可以设置任意整数(正整数、0、负整数) image.png

flex-grow(拉伸/扩展)

flex-grow 属性设置 flex items 如何拉伸/扩展

  • 可以设置任意非负数字(0、正小数、正整数),默认值是 0

当 flex container 在 main axis 方向上有剩余size时,flex-grow 属性才会有效

如果所有 flex items 的 flex-grow 总和 sum 超过 1:

  • 每个 flex item 扩展的 size 为 flex container 的剩余 size * flex-grow / sum
  • flex items 扩展后的最终 size 不超过 max-width\max-height

flex-shrink(收缩/缩小)

flex-shrink 设置 flex items 如何收缩/缩小

可以设置任意非负数字(0、正小数、正整数),默认值是 1

当 flex items 在 main axis 方向上超过了 flex container 的 size,flex-shrink 属性才会有效

如果所有 flex items 的 flex-shrink 总和超过 1,每个 flex item 收缩的 size为:

  • flex items 超出 flex container 的 size * 收缩比例 / 所有 flex items 的收缩比例之和
  • flex items 收缩后的最终 size 不能小于 min-width\min-height

flex-basis(计算主轴是否有多余空间)

flex-basis 指定了子项在容器主轴方向上的初始大小,优先级高于自身的宽度width

1
flex-basis: 0 | 100% | auto | <length>

宽度是200,但是由于设置了 flex-basis: 300px;,所以子项最终宽度是大于自身设置的宽度

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.item {    
width: 400px;
height: 300px;
background: skyblue;
display: flex;
padding: 5px;
}

.item div {
height: 100px;
font-size: 20px;
}

.item div {
width: 200px;
flex-basis: 300px;
background: pink;
}

flex

flex属性flex-grow, flex-shrink 和 flex-basis的合写。

默认值为0 1 auto。后两个属性可选。

  • 该属性有三个快捷值:auto (1 1 auto) 和 none (0 0 auto)和initial(0 1 auto)

单值语法:值必须为以下其中之一

  • 一个无单位数(): 它会被当作flex-grow的值
  • 一个有效的宽度(width)值: 它会被当作 flex-basis的值

  • 关键字none,auto或initial

双值语法:第一个值必须为一个无单位数,并且它会被当作 flex-grow 的值。

第二个值必须为以下之一:

  • 一个无单位数:它会被当作 flex-shrink 的值
  • 一个有效的宽度值: 它会被当作 flex-basis的值

三值语法:

  • 第一个值必须为一个无单位数,并且它会被当作 flex-grow 的值
  • 第二个值必须为一个无单位数,并且它会被当作 flex-shrink 的值
  • 第三个值必须为一个有效的宽度值, 并且它会被当作 flex-basis 的值

布局案例

等高布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.item {
width: 400px;
height: 300px;
background: skyblue;
display: flex;
justify-content: space-between;
padding: 5px;
}

.item div {
width: 100px;
font-size: 20px;
background: pink;
}

.item div p {
text-align: center;
}

左侧宽度固定,右侧自适应布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
html, body {
margin: 0;
padding: 0;
}

.container {
display: flex;
width: 100%;
height: 100vh;
background: skyblue;
}

.left-tree {
width: 200px;
height: 100%;
background: pink;
}

.main {
flex: 1 1 auto;
}

粘性页脚

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
html, body {
margin: 0;
padding: 0;
}

.container {
display: flex;
flex-direction: column;
width: 100%;
height: 100vh;
}

.header {
width: 100%;
height: 60px;
background: pink;
}

.main {
flex: 1 1 auto;
background: skyblue;
}

.footer {
width: 100%;
height: 60px;
background: pink;
}

总结

flex布局 是目前最流行的布局方式之一。

  • 优点是浏览器兼容性较好,学习成本较低,上手简单,可以快速通过 flex布局 实现布局效果。

  • 缺点是相较于 grid网格布局 来说, flex布局一维布局 ,一般用于单行或者单列的布局,如果要实现多行多列的布局,推荐使用 gird网格布局

Grid网格布局

Grid的概念

Grid 布局即网格布局,是一种新的 CSS 布局模型,比较擅长将一个页面划分为几个主要区域,以及定义这些区域的大小、位置、层次等关系。

号称是最强大的的 CSS 布局方案,是目前唯一一种 CSS 二维布局。

利用 Grid 布局,我们可以轻松实现类似下图布局:

img

Grid布局和Flex布局的区别

讲到布局,我们就会想到 flex 布局,甚至有人认为竟然有 flex 布局了,似乎没有必要去了解 Grid 布局。但 flex 布局和 Grid 布局有实质的区别,那就是 flex 布局是一维布局,Grid 布局是二维布局flex 布局一次只能处理一个维度上的元素布局,一行或者一列。Grid 布局是将容器划分成了“行”和“列”,产生了一个个的网格,我们可以将网格元素放在与这些行和列相关的位置上,从而达到我们布局的目的。

Grid 布局远比 flex 布局强大!

flex布局示例:

img

Grid 布局示例:

Grid 布局

基础概念

容器和项目:我们通过在元素上声明 display:griddisplay:inline-grid 来创建一个网格容器(可以理解为grid-container)。一旦我们这样做,这个元素的所有直系子元素将成为网格项目(grid-item)。

网格轨道grid-template-columnsgrid-template-rows 属性来定义网格中的行和列。容器内部的水平区域称为行,垂直区域称为列。

网格单元:一个网格单元是在一个网格元素中最小的单位, 从概念上来讲其实它和表格的一个单元格很像。

网格线:划分网格的线,称为”网格线”。应该注意的是,当我们定义网格时,我们定义的是网格轨道,而不是网格线。Grid 会为我们创建编号的网格线来让我们来定位每一个网格元素。m 列有 m + 1 根垂直的网格线,n 行有 n + 1 跟水平网格线。比如上图示例中就有 4 根垂直网格线。一般而言,是从左到右,从上到下,1,2,3 进行编号排序。当然也可以从右到左,从下到上,按照 -1,-2,-3…顺序进行编号排序。

网格线

给父级容器设置的属性

display

我们通过在元素上声明 display:griddisplay:inline-grid 来创建一个网格容器。

声明 display:grid 则该容器是一个块级元素,设置成 display: inline-grid 则容器元素为行内元素

grid-template-columns 属性和 grid-template-rows 属性

grid-template-columns 属性设置列宽,grid-template-rows 属性设置行高,这两个属性在 Grid 布局中尤为重要,它们的值是有多种多样的,而且它们的设置是比较相似的

1
2
3
4
5
6
7
8
.wrapper {
display: grid;
/* 声明了三列,宽度分别为 200px 100px 200px */
grid-template-columns: 200px 100px 200px;
grid-gap: 5px;
/* 声明了两行,行高分别为 50px 50px */
grid-template-rows: 50px 50px;
}

repeat() 函数

可以简化重复的值。该函数接受两个参数,第一个参数是重复的次数,第二个参数是所要重复的值。

1
2
3
4
5
6
7
.wrapper-1 {
display: grid;
grid-template-columns: 200px 100px 200px;
grid-gap: 5px;
/* 2行,而且行高都为 50px */
grid-template-rows: repeat(2, 50px);
}

auto-fill 关键字

表示自动填充,让一行(或者一列)中尽可能的容纳更多的单元格。grid-template-columns: repeat(auto-fill, 200px) 表示列宽是 200 px,但列的数量是不固定的,只要浏览器能够容纳得下,就可以放置元素,代码以及效果如下图所示:

1
2
3
4
5
6
.wrapper-2 {
display: grid;
grid-template-columns: repeat(auto-fill, 200px);
grid-gap: 5px;
grid-auto-rows: 50px;
}

image

fr 关键字

Grid 布局还引入了一个另外的长度单位来帮助我们创建灵活的网格轨道。fr 单位代表网格容器中可用空间的一等份。grid-template-columns: 200px 1fr 2fr 表示第一个列宽设置为 200px,后面剩余的宽度分为两部分,宽度分别为剩余宽度的 1/3 和 2/3。代码以及效果如下图所示:

1
2
3
4
5
6
.wrapper-3 {
display: grid;
grid-template-columns: 200px 1fr 2fr;
grid-gap: 5px;
grid-auto-rows: 50px;
}

image

minmax() 函数

我们有时候想给网格元素一个最小和最大的尺寸,minmax() 函数产生一个长度范围,表示长度就在这个范围之中都可以应用到网格项目中。它接受两个参数,分别为最小值和最大值。grid-template-columns: 1fr 1fr minmax(300px, 2fr) 的意思是,第三个列宽最少也是要 300px,但是最大不能大于第一第二列宽的两倍。代码以及效果如下:

1
2
3
4
5
6
.wrapper-4 {
display: grid;
grid-template-columns: 1fr 1fr minmax(300px, 2fr);
grid-gap: 5px;
grid-auto-rows: 50px;
}

image

auto 关键字

由浏览器决定长度。通过 auto 关键字,我们可以轻易实现三列或者两列布局。grid-template-columns: 100px auto 100px 表示第一第三列为 100px,中间由浏览器决定长度,代码以及效果如下:

1
2
3
4
5
6
.wrapper-5 {
display: grid;
grid-template-columns: 100px auto 100px;
grid-gap: 5px;
grid-auto-rows: 50px;
}

image

grid-row-gap 属性、grid-column-gap 属性以及 grid-gap 属性

grid-row-gap 属性、grid-column-gap 属性分别设置行间距和列间距。grid-gap 属性是两者的简写形式。

grid-row-gap: 10px 表示行间距是 10px,grid-column-gap: 20px 表示列间距是 20px。grid-gap: 10px 20px 实现的效果是一样的

1
2
3
4
5
6
7
8
9
10
11
12
13
.wrapper {
display: grid;
grid-template-columns: 200px 100px 100px;
grid-gap: 10px 20px;
grid-auto-rows: 50px;
}
.wrapper-1 {
display: grid;
grid-template-columns: 200px 100px 100px;
grid-auto-rows: 50px;
grid-row-gap: 10px;
grid-column-gap: 20px;
}

以上两种写法效果是一样的。

img

grid-template-areas 属性

grid-template-areas 属性用于定义区域,一个区域由一个或者多个单元格组成

一般这个属性跟网格元素的 grid-area 一起使用,我们在这里一起介绍。

grid-area 属性指定项目放在哪一个区域

1
2
3
4
5
6
7
8
9
10
.wrapper {
display: grid;
grid-gap: 10px;
grid-template-columns: 120px 120px 120px;
grid-template-areas:
". header header"
"sidebar content content";
background-color: #fff;
color: #444;
}

上面代码表示划分出 6 个单元格,其中值得注意的是 . 符号代表空的单元格,也就是没有用到该单元格。

1
2
3
4
5
6
7
8
9
10
11
.sidebar {
grid-area: sidebar;
}

.content {
grid-area: content;
}

.header {
grid-area: header;
}

以上代码表示将类 .sidebar .content .header所在的元素放在上面 grid-template-areas 中定义的 sidebar content header 区域中

img

grid-auto-flow 属性

grid-auto-flow 属性控制着自动布局算法怎样运作,精确指定在网格中被自动布局的元素怎样排列。默认的放置顺序是”先行后列”,即先填满第一行,再开始放入第二行,即下图英文数字的顺序 one,two,three…。这个顺序由 grid-auto-flow 属性决定,默认值是 row

1
2
3
4
5
6
7
.wrapper {
display: grid;
grid-template-columns: 100px 200px 100px;
grid-auto-flow: row;
grid-gap: 5px;
grid-auto-rows: 50px;
}

img

细心的同学可能发现了一个问题,就是第五个项目和第六个项目之间有个空白(如下图所示),这个是由于第六块的长度大于了空白处的长度,被挤到了下一行导致的。在实际应用中,我们可能想让下面长度合适的填满这个空白,这个时候可以设置 grid-auto-flow: row dense,表示尽可能填满表格。代码以及效果如下所示:

image

1
2
3
4
5
6
7
.wrapper-2 {
display: grid;
grid-template-columns: 100px 200px 100px;
grid-auto-flow: row dense;
grid-gap: 5px;
grid-auto-rows: 50px;
}

image

可以设置 grid-auto-flow: column,表示先列后行,代码以及效果如下图所示:

1
2
3
4
5
6
7
.wrapper-1 {
display: grid;
grid-auto-columns: 100px;
grid-auto-flow: column;
grid-gap: 5px;
grid-template-rows: 50px 50px;
}

image

justify-items 属性、align-items 属性以及 place-items 属性

justify-items 属性设置单元格内容的水平位置(左中右),align-items 属性设置单元格的垂直位置(上中下)

下面以 justify-items 属性为例进行讲解,align-items 属性同理,只是方向为垂直方向。它们都有如下属性:

1
2
3
4
.container {
justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
}

其代码实现以及效果如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.wrapper, .wrapper-1, .wrapper-2, .wrapper-3 {
display: grid;
grid-template-columns: 100px 200px 100px;
grid-gap: 5px;
grid-auto-rows: 50px;
justify-items: start;
}
.wrapper-1 {
justify-items: end;
}
.wrapper-2 {
justify-items: center;
}
.wrapper-3 {
justify-items: stretch;
}
  • start:对齐单元格的起始边缘

image

  • end:对齐单元格的结束边缘

image

  • center:单元格内部居中

image

  • stretch:拉伸,占满单元格的整个宽度(默认值)

image

justify-content 属性、align-content 属性以及 place-content 属性

justify-content 属性是整个内容区域在容器里面的水平位置(左中右),align-content 属性是整个内容区域的垂直位置(上中下)。它们都有如下的属性值。

1
2
3
4
.container {
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}

下面以 justify-content 属性为例进行讲解,align-content 属性同理,只是方向为垂直方向

  • start - 对齐容器的起始边框
  • end - 对齐容器的结束边框
  • center - 容器内部居中
1
2
3
4
5
6
7
8
9
10
11
12
13
.wrapper, .wrapper-1, .wrapper-2, .wrapper-3, .wrapper-4, .wrapper-5, .wrapper-6 {
display: grid;
grid-template-columns: 100px 200px 100px;
grid-gap: 5px;
grid-auto-rows: 50px;
justify-content: start;
}
.wrapper-1 {
justify-content: end;
}
.wrapper-2 {
justify-content: center;
}

image

  • space-around - 每个项目两侧的间隔相等。所以,项目之间的间隔比项目与容器边框的间隔大一倍
  • space-between - 项目与项目的间隔相等,项目与容器边框之间没有间隔
  • space-evenly - 项目与项目的间隔相等,项目与容器边框之间也是同样长度的间隔
  • stretch - 项目大小没有指定时,拉伸占据整个网格容器
1
2
3
4
5
6
7
8
9
10
11
12
.wrapper-3 {
justify-content: space-around;
}
.wrapper-4 {
justify-content: space-between;
}
.wrapper-5 {
justify-content: space-evenly;
}
.wrapper-6 {
justify-content: stretch;
}

image

grid-auto-columns 属性和 grid-auto-rows 属性

在讲 grid-auto-columns 属性和 grid-auto-rows 属性之前,先来看看隐式和显式网格的概念

隐式和显式网格:显式网格包含了你在 grid-template-columnsgrid-template-rows 属性中定义的行和列。如果你在网格定义之外又放了一些东西,或者因为内容的数量而需要的更多网格轨道的时候,网格将会在隐式网格中创建行和列

假如有多余的网格(也就是上面提到的隐式网格),那么它的行高和列宽可以根据 grid-auto-columns 属性和 grid-auto-rows 属性设置。它们的写法和grid-template-columnsgrid-template-rows 完全相同。如果不指定这两个属性,浏览器完全根据单元格内容的大小,决定新增网格的列宽和行高

1
2
3
4
5
6
7
8
.wrapper {
display: grid;
grid-template-columns: 200px 100px;
/* 只设置了两行,但实际的数量会超出两行,超出的行高会以 grid-auto-rows 算 */
grid-template-rows: 100px 100px;
grid-gap: 10px 20px;
grid-auto-rows: 50px;
}

grid-template-columns 属性和 grid-template-rows 属性只是指定了两行两列,但实际有九个元素,就会产生隐式网格。通过 grid-auto-rows 可以指定隐式网格的行高为 50px

img

给子级项目设置的属性

grid-column-start 属性、grid-column-end 属性、grid-row-start 属性以及grid-row-end 属性

可以指定网格项目所在的四个边框,分别定位在哪根网格线,从而指定项目的位置

  • grid-column-start 属性:左边框所在的垂直网格线
  • grid-column-end 属性:右边框所在的垂直网格线
  • grid-row-start 属性:上边框所在的水平网格线
  • grid-row-end 属性:下边框所在的水平网格线
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
grid-auto-rows: minmax(100px, auto);
}
.one {
grid-column-start: 1;
grid-column-end: 2;
background: #19CAAD;
}
.two {
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
/* 如果有重叠,就使用 z-index */
z-index: 1;
background: #8CC7B5;
}
.three {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 4;
background: #D1BA74;
}
.four {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 2;
grid-row-end: 5;
background: #BEE7E9;
}
.five {
grid-column-start: 2;
grid-column-end: 2;
grid-row-start: 2;
grid-row-end: 5;
background: #E6CEAC;
}
.six {
grid-column: 3;
grid-row: 4;
background: #ECAD9E;
}

上面代码中,类 .two 所在的网格项目,垂直网格线是从 2 到 4,水平网格线是从 1 到 2。其中它跟 .three (垂直网格线是从3 到 4,水平网格线是从 1 到 4) 是有冲突的。可以设置 z-index 去决定它们的层级关系

img

grid-area 属性

grid-area 属性指定项目放在哪一个区域,在上面介绍 grid-template-areas 的时候有提到过

justify-self 属性、align-self 属性以及 place-self 属性

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

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

两者很相像,这里只拿 justify-self 属性演示,align-self 属性同理,只是作用于垂直方向。place-self 是设置 align-selfjustify-self 的简写形式,这里也不重复介绍。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.item {
justify-self: start | end | center | stretch;
align-self: start | end | center | stretch;
}
复制代码
.item {
justify-self: start;
}
.item-1 {
justify-self: end;
}
.item-2 {
justify-self: center;
}
.item-3 {
justify-self: stretch;
}
复制代码
  • start:对齐单元格的起始边缘

image

  • end:对齐单元格的结束边缘

image

  • center:单元格内部居中

    image

  • stretch:拉伸,占满单元格的整个宽度(默认值)

    image

实现响应式布局

fr 实现等分响应式

fr 等分单位,可以将容器的可用空间分成想要的多个等分空间。利用这个特性,我们能够轻易实现一个等分响应式。grid-template-columns: 1fr 1fr 1fr 表示容器分为三等分

1
2
3
4
5
6
7
.wrapper {
margin: 50px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px 20px;
grid-auto-rows: 50px;
}

image

repeat + auto-fit——固定列宽,改变列数量

等分布局并不只有 Grid 布局才有,像 flex 布局也能轻松实现,接下来看看更高级的响应式

上面例子的始终都是三列的,但是需求往往希望我们的网格能够固定列宽,并根据容器的宽度来改变列的数量。这个时候,我们可以用到上面提到 repeat() 函数以及 auto-fit 关键字。grid-template-columns: repeat(auto-fit, 200px) 表示固定列宽为 200px,数量是自适应的,只要容纳得下,就会往上排列,代码以及效果实现如下:

1
2
3
4
5
6
7
.wrapper {
margin: 50px;
display: grid;
grid-template-columns: repeat(auto-fit, 200px);
grid-gap: 10px 20px;
grid-auto-rows: 50px;
}

image

repeat+auto-fit+minmax 去掉右侧空白

上面看到的效果中,右侧通常会留下空白,这是我们不希望看到的。如果列的宽度也能在某个范围内自适应就好了。minmax() 函数就帮助我们做到了这点。将 grid-template-columns: repeat(auto-fit, 200px) 改成 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) 表示列宽至少 200px,如果还有空余则一起等分。代码以及效果如下所示:

1
2
3
4
5
6
7
.wrapper {
margin: 50px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 10px 20px;
grid-auto-rows: 50px;
}

auto-auto-minmax.gif

repeat+auto-fit+minmax-span-dense 解决空缺问题

似乎一切进行得很顺利,但是某天 UI 来说,每个网格元素的长度可能不相同,这也简单,通过 span 关键字进行设置网格项目的跨度,grid-column-start: span 3,表示这个网格项目跨度为 3。具体的代码与效果如下所示:

1
2
3
.item-3 {
grid-column-start: span 3;
}

image

不对,怎么右侧又有空白了?原来是有一些长度太长了,放不下,这个时候就到我们的 dense 关键字出场了。grid-auto-flow: row dense 表示尽可能填充,而不留空白,代码以及效果如下所示:

1
2
3
4
5
6
7
8
9
10
11
.wrapper, .wrapper-1 {
margin: 50px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 10px 20px;
grid-auto-rows: 50px;
}

.wrapper-1 {
grid-auto-flow: row dense;
}

image