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：grid 或 display：inline-grid 来创建一个网格容器（可以理解为grid-container）。一旦我们这样做，这个元素的所有直系子元素将成为网格项目（grid-item）。

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

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

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

网格线

给父级容器设置的属性

display

我们通过在元素上声明 display：grid 或 display：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-columns 和 grid-template-rows 属性中定义的行和列。如果你在网格定义之外又放了一些东西，或者因为内容的数量而需要的更多网格轨道的时候，网格将会在隐式网格中创建行和列

假如有多余的网格（也就是上面提到的隐式网格），那么它的行高和列宽可以根据 grid-auto-columns 属性和 grid-auto-rows 属性设置。它们的写法和grid-template-columns 和 grid-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-self 和 justify-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