1. 关于 flex 布局

参考链接：www.ruanyifeng.com/blog/2015/0…

任何一个容器都可以被指定为flex布局

采用flex布局的元素，称为Flex容器。它的所有子元素自动成为容器成员，称为flex项目。

原理：给父容器添加flex属性，使添加的子元素沿着主轴如何摆放

当给父盒子设为flex布局后，子元素的float、clear和 vertical-align属性将消失

.box{
    display: flex | inline-flex
}

flexbox 的两根轴线:

当使用 flex 布局时，首先想到的是两根轴线：主轴和交叉轴。

主轴由 flex-direction 定义,另一根轴垂直于它。我们使用 flexbox 的所有属性都跟这两根轴线有关, 所以有必要在一开始首先理解它。

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

主轴的开始位置叫做(main start)，结束位置叫做(main end)

交叉轴的开始位置叫做(cross start)，交叉轴的结束位置叫做(cross end)

项目(子元素item)沿主轴排列，单个项目占据的主轴空间叫做(main size)，占据的交叉轴空间叫做(cross size)

1.1 传统布局 VS flex布局

传统布局兼容性好、布局繁琐、局限性不能在移动端很好的布局

flex弹性布局操作方便（控制台可视化操作），布局简单，移动端应用很广泛，IE11或更低版本不支持或者只支持部分

特点：

Flexbox布局（Flexible Box)模块旨在提供一个容器里的项目布局（基于一维），即使他们的大小是未知或者是动态的。

缺点：

浏览器兼容性比较差，只能兼容到ie9以上。

单位

1.2 容器|项目属性

父容器的属性	含义	属性
flex-direction	决定主轴的方向	row(默认值)：主轴为水平方向，起点在左端 row-reverse: 主轴为水平方向，起点在右端 column：主轴为垂直方向，起点在上沿 column-reverse: 主轴为垂直方向，起点在下沿
flex-wrap	一条轴线排不下如何换行	nowrap: 不换行 wrap: 换行，第一行在上方 wrap-reverse: 换行，第一行在下方
flex-flow	flex-direction和flex-wrap的简写形式	默认值为 row nowrap
justify-content	定义了项目在主轴上的对齐方式	flex-start(默认值)：左对齐 flex-end: 右对齐 center: 居中 space-between: 两端对齐，项目之间的间隔都相等 space-around: 每个项目两侧的间隔相等，项目之间的间隔比项目与边框的间隔大一倍
align-items	属性定义项目在交叉轴上如何对齐	flex-start: 交叉轴的起点对齐 flex-end: 交叉轴的终点对齐 center: 交叉轴的中心点对齐 baseline: 项目的第一行文字的基线对齐 stretch: 如果项目未设置高度或者auto，将占满整个容器的高度
align-content	属性定义了多根轴线的对齐方式，如果项目只有一根轴线，该属性不起作用	flex-start: 与交叉轴的起点对齐 flex-end: 与交叉轴的终点对齐 center: 与交叉轴的中点对齐 space-between: 与交叉轴两端对齐，轴线之间的间隔平均分布 space-around: 每根轴线两侧的间隔都相等，所以，轴线之间的间隔比轴线与边框的间隔大一倍 stretch: 轴线占满整个交叉轴

项目的属性	含义	属性
order	定义项目的排序顺序，数值越小，排列越靠前，默认是0。多个项目设置后效果更明显	order: 0
flex-grow	定义项目的放大比例，按照剩余空间去放大,默认0	0
flex-shrink	定义项目的缩小比例，默认1	1
flex-basis	定义分配多余空间之前，项目占据的主轴空间	合法值："auto"、"inherit"，或单位为 "%", "px", "em" 的值，或任何其他长度单位。
flex	flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto, 有两个属性可选
align-self	允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性，默认值为auto

1.3 容器案例

  <div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
  </div>
  
  style
  .box {
  border: 1px solid #999;
  text-align: center;
  width: 500px;
  height: 500px;
}

.box > div {
  width: 50px;
  height: 50px;
  line-height: 50px;
  background-color: bisque;
  border-radius: 4px;
  border: 1px solid #ccc;
}

1. flex-direction

.box {
    display: flex;
    flex-direction: row | row-reverse | column | column-reverse;
}

默认值：row,主轴为水平方向，起点在左端

row-reverse：主轴为水平方向，起点在右端

column：主轴为垂直方向，起点在上沿

column-reverse：主轴为垂直方向，起点在下沿

2. flex-wrap

flex-wrap: nowrap | wrap | wrap-reverse;

默认值：nowrap 不换行，即当主轴尺寸固定时，当空间不足时，项目尺寸会随之调整而并不会挤到下一行。

wrap：项目主轴总尺寸超出容器时换行，第一行在上方

wrap-reverse：换行，第一行在下方

3. flex-flow

flex-flow 等于flex-direction 和 flex-wrap 的简写

flex-flow: row-reverse wrap-reverse;

4. justify-content

主轴水平方向空间未站满时候或者多行情况应用

    justify-content: flex-start | flex-end | center | space-between | space-around;

默认值: flex-start 左对齐

flex-end：右对齐

center：居中

space-between：两端对齐，项目之间的间隔相等，即剩余空间等分成间隙。

space-around：每个项目两侧的间隔相等，所以项目之间的间隔比项目与边缘的间隔大一倍。

space-evenly：每个项目之间和项目两侧的空间是相等的

space-around 和 space-evenly 的区别

5. align-items

    align-items: flex-start | flex-end | center | baseline | stretch;

默认值 stretch，如果项目未设置高度或者auto，将占满整个容器的高度

flex-start：交叉轴的起点对齐

flex-end：交叉轴的终点对齐

center：交叉轴的中点对齐

baseline: 项目的第一行文字的基线对齐项目4 加上margin-top: 20px; baseline会按照不一致的那一个基线对齐(或者交叉点最大的那一项基线对齐)

6.align-content

多根轴线的对齐方式（只有一根轴线不生效）

当flex-wrap 设置为 wrap的时候，容器可能会出现多条轴线，这时候需要设置多条轴线之间的对齐方式

    align-content: flex-start | flex-end | center | space-between | space-around | stretch;

默认值： stretch,可以看出多条轴线平分容器的垂直方向是那个的空间

flex-start：轴线全部在交叉轴上的起点对齐

flex-end：轴线全部在交叉轴上的终点对齐

center：轴线全部在交叉轴上的中间对齐

space-between：轴线两端对齐，之间的间隔相等，即剩余空间等分成间隙。

space-around：每个轴线两侧的间隔相等，所以轴线之间的间隔比轴线与边缘的间隔大一倍。

space-evenly：每个轴线之间和轴线两侧的空间是相等的

1.4 项目 flex item 案例

  <div class="boxItem">
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="item3">3</div>
    <div class="item4">4</div>
    <div class="item5">5</div>
    <div class="item6">6</div>
    <div class="item7">7</div>
    <div class="item8">8</div>
    <div class="item9">9</div>
    <div class="item10">10</div>
    <div class="item11">11</div>
    <div class="item12">12</div>
  </div>
  
  
style
/* 项目的一些常用属性 */
.boxItem{
  border: 1px solid #999;
  text-align: center;
  margin: auto;
  width: 500px;
  height: 500px;
  display: flex;
}

.boxItem > div {
  width: 50px;
  height: 50px;
  line-height: 50px;
  background-color: #e67214;
  border-radius: 4px;
  border: 1px solid #ccc;
}

1. order

默认是0，支持负数，只能是整数，数值越小越靠前

    order: 1;

2. flex-basis

flex-basis: <length> | auto;

flex-basis: 30% ，在分配空间之前，设置项目占据的主轴空间，单位可以是%、px、em的值

3. flex-grow

    flex-grow: 1;

当所有的项目都以 flex-basis的值进行排列后，仍然有剩余空间，可以通过此属性等分剩余空间

默认属性是0，当所有项目的flex-grow属性为1，所有项目会去等分剩余空间

当所有项目的flex-grow属性为1，只有一个项目flex-grow属性为2，此项目占据的空间将比其他项目多一倍，其他项目会按照剩余的空间继续等分

4. flex-shrink

    flex-shrink: 1;

当空间不足，该项目将缩小。

每个项目默认值是1，如果一个项目设置flex-shrink属性为0，空间不足时不会缩小，保持默认尺寸

如果一个项目设置flex-shrink 属性大于1，其他项目都是1，那么此项目会等比缩放。

直到其他项目尺寸恢复默认，无论怎么增加flex-shrink的值，此项目不再缩放

5. flex

    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

flex 是flex-grow、flex-shrink、flex-basis的简写

flex 有两个快捷值：auto(1 1 auto) 和 none(0 0 auto)

建议优先使用这个属性，而不是单独写3个分离的属性，因为浏览器会推算相关值

1. 当前主轴空间未占满，flex: 1 当前项目会撑满剩余空间
2. 当前主轴空间已占满，flex: 1 当前项目会缩放，直到其他项目等分最大后不再缩放
3. 项目 flex: 0 0 50%; 相当于
    - flex-grow: 0;
    - flex-shrink: 0;
    - flex-basis: 50%;
    
*4. 关于flex取值，有很多特殊情况:
    - 只有传了单位（%、px、em）才会应用flex-basis，否则默认0%（以下列子简称默认）
    - flex传一个参数只有传0，默认才为0，否则flex-wrap 都为传的值（非单位）或者1

flex传一个参数（非负数），会应用到flex-grow，其他的取默认

flex传一个参数（带单位），会应用到flex-basis,其他的取默认

flex传两个参数，应用到 flex-grow 和 flex-shrink

flex传两个参数，第二个参数带单位，应用到flex-grow 和 flex-basis

flex传两个参数，第一个参数带单位，应用到flex-basis 和 flex-grow

flex传三个参数，第三个参数带单位才会生效，应用到flex-grow 和 flex-shrink 和 flex-basis

6. align-self

     align-self: auto | flex-start | flex-end | center | baseline | stretch;

允许单个项目与其他项目设置不一样的对齐方式，可覆盖 align-items 属性

auto 表示继承父元素的 align-items 属性，如果没有父元素，等同于 stretch

flex-start 覆盖后使项目按照交叉轴起点对齐

flex-end 覆盖后使项目按照交叉轴终点对齐

center 覆盖后使项目按照交叉轴居中对齐

baseline 覆盖后使项目按照交叉顶部基线对齐

stretch 当前项目未设置高度且父容器设置高度时生效，使当前项目按照父容器最大高度拉伸

1.5 使用flex制作骰子

点击按钮切换布局

2. 关于grid

参考链接：www.ruanyifeng.com/blog/2019/0…

网格布局 grid 是最强大的 CSS 布局方案，grid布局将容器划分成“行”和“列”，产生单元格，然后指定“项目所在的单元格”，可以看作是二维布局。

行和列的交叉区域，称为单元格（cell）

划分网格的线，称为“网格线”（grid line）,水平网格线划分行，垂直网格线划分出列

grid 布局属性分为两类，容器属性（container）和项目属性(item)

设为网格布局以后，容器子元素（项目）的 float、display: inline-block、display: teble-cell、vertical-align和column-* 等设置将失效

  display: grid | inline-grid;

1. 项目只能是容器的顶层子元素，不包含项目的子元素。比如下面span就不是项目。grid布局只对项目生效

<div>
  <div><span>one</span></div>
  <div><span>two</span></div>
  <div><span>three</span></div>
</div>

1. 容器里面的水平区域称为“行” row,垂直区域称为“列” column

1. 正常情况下，n 行有 n+1 根水平网格线，m 列有 m+1 根垂直网格线，下图是4*4的网格，共有5根水平网格线和5根垂直网格线

1. 基本概念

2.1 容器｜项目属性

父容器的属性	含义	属性
grid-template-columns	定义每一列的宽度	支持函数、单位、auto
grid-template-rows	定义每一行的行高	支持函数、单位、auto
grid-row-gap	设置行间距	px
grid-column-gap	设置列间距	px
grid-gap	`grid-column-gap`和`grid-row-gap`的合并简写形式	grid-gap: `<grid-row-gap> <grid-column-gap>`;
gap	根据最新标准，上面三个属性名的`grid-`前缀已经删除，`grid-column-gap`和`grid-row-gap`写成`column-gap`和`row-gap`，`grid-gap`写成`gap`。	gap: `<grid-row-gap> <grid-column-gap>`;
grid-template-areas	用于定义区域。需要配合项目属性grid-area 如果某些区域不需要利用，则使用“点”（.）表示	`grid-template-areas: 'a b c' 'd . f' 'g . i'` `grid-area: e;`
grid-auto-flow	划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格，默认放置顺序`先行后列`	`row`: 先行后列 `column`:先列后行 `row danse`：表示先行后列，并且尽可能紧密填满，尽量不出现空格 `column danse` 表示先列后行，并且尽量填满空格
justify-items	设置单元格内容的水平位置（左中左）	`start`：对齐单元格的起始边缘。 `end`：对齐单元格的结束边缘。 `center`：单元格内部居中。 `stretch`：拉伸，占满单元格的整个宽度（默认值）。
align-items	设置单元格内容的垂直位置（上中下）	`start`：对齐单元格的起始边缘。 `end`：对齐单元格的结束边缘。 `center`：单元格内部居中。 `stretch`：拉伸，占满单元格的整个宽度（默认值）。
place-items	`align-items`属性和`justify-items`属性的合并简写形式。	`place-items: <align-items> <justify-items>;`
justify-content	设置整个内容区域在容器里面的水平位置（左中右）	`start`:对齐容器的起始边框。 `end`:对齐容器的结束边框。 `center`:容器内部居中。 `stretch`:项目大小没有指定时，拉伸占据整个网格容器。 `space-around`:每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍。 `space-between`:项目与项目的间隔相等，项目与容器边框之间没有间隔。 `space-evenly`:项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。
align-content	设置整个内容区域的垂直位置（上中下）	`start`:对齐容器的起始边框。 `end`:对齐容器的结束边框。 `center`:容器内部居中。 `stretch`:项目大小没有指定时，拉伸占据整个网格容器。 `space-around`:每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍。 `space-between`:项目与项目的间隔相等，项目与容器边框之间没有间隔。 `space-evenly`:项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。
place-content	`align-content`属性和`justify-content`属性的合并简写形式	`place-content: <align-content> <justify-content>`
grid-auto-columns	一些项目超出`grid-template-columns`的设置，浏览器会自动生成多余的网格，以便放置项目，这时可以通过`grid-auto-columns`设置超出部分项目的列宽	`grid-auto-columns: 50px;`
grid-auto-rows	一些项目超出`grid-template-rows`的设置，浏览器会自动生成多余的网格，以便放置项目，这时可以通过`grid-auto-rows`设置超出部分项目的行高	`grid-auto-rows: 50px;`

项目的属性	含义	属性
grid-column和grid-row	项目的位置是可以指定的，具体方法就是指定项目的四个边框，分别定位在哪根网格线。 `grid-column`属性是`grid-column-start`和`grid-column-end`的合并简写形式，`grid-row`属性是`grid-row-start`属性和`grid-row-end`的合并简写形式。	`grid-column-start`属性：左边框所在的垂直网格线 `grid-column-end`属性：右边框所在的垂直网格线 `grid-row-start`属性：上边框所在的水平网格线 `grid-row-end`属性：下边框所在的水平网格线 `grid-column: <start-line>/<end-line>;grid-row: <start-line>/<end-line>;`
grid-area	指定项目放在哪一个区域。 `grid-area`属性还可用作`grid-row-start、grid-column-start、grid-row-end、grid-column-end`的合并简写形式，直接指定项目的位置。	`grid-area: e;` `grid-area: <row-start> / <column-start> / <row-end> / <column-end>;` `grid-area: 1 / 1 / 3 / 3;`
justify-self	设置单个项目单元格内容的水平位置（左中右）	`start`：对齐单元格的起始边缘。 `end`：对齐单元格的结束边缘。 `center`：单元格内部居中。 `stretch`：拉伸，占满单元格的整个宽度（默认值）
align-self	设置单个项目单元格内容的垂直位置（上中下）	`start`：对齐单元格的起始边缘。 `end`：对齐单元格的结束边缘。 `center`：单元格内部居中。 `stretch`：拉伸，占满单元格的整个宽度（默认值）
place-self	是`align-self`属性和`justify-self`属性的合并简写形式	`place-self: <align-self> <justify-self>;`

2.2 容器案例

  <div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
  </div>
  
  
  style
  .container {
  margin: auto;
  border: 1px solid #999;
  text-align: center;
  width: 500px;
  height: 500px;
}
.container > div {
  background-color: #e67214;
  border-radius: 4px;
  border: 1px solid #ccc;
}

1. grid-template-*

网格行和列的设置

单位支持 px、%、em、rem、fr、auto

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px 100px 100px;
  grid-template-rows:100px 100px;
}

grid-template-columns 定义每一列的列宽

grid-template-rows 定义每一行的行高

repeat() 简化重复的值

repeat 接受两个参数,第一个参数是重复的次数，第二个参数是需要重复的值

有时候，重复些同样的值非常麻烦，可以使用repeat()函数,改写上边的案例如下

.container {
  display: grid;
  grid-template-columns: repeat(5, 100px);
  grid-template-rows:repeat(2, 100px);
}

auto-fill 自动填充

有时候，单元格的大小是固定的，但是容器的大小不确定。需要每一行（或每一列）容纳尽可能多的单元格，这时可以使用 auto-fill 关键字表示自动填充

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
  grid-template-rows:repeat(auto-fill, 100px);
}

fr 关键字（fraction）片段，表示比例关系

如果列的宽度只有 1fr，就表示项目按照1列去等分容器

如果列的宽度是 1fr 1fr ，就表示项目按照2列去等分容器

如果列的宽度是 1fr 2fr, 表示后者是前者的两倍

如果列的宽度是 100px 1fr 2fr,表示第一列宽度为100像素，第二列和第三列自适应剩余空间，但是第二列宽度是第三列的一半

minmax() 函数产生一个长度范围，表示长度就在这个范围之中，它接受两个参数，最大值和最小值。表示第三列的宽度最少100px,不能大于前面列的列宽

auto 关键字，由浏览器决定所占列宽，也就是自适应

常见的圣杯布局和双飞翼布局，两边固定，中间自适应布局

网格线的名称 grid-template-columns 属性和 grid-template-rows 属性里面，还可以使用方括号，指定每一根网格线的名称，方便以后的引用

2. gap

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 20px;
  grid-gap: 20px 20px;
  column-gap: 20px;
  row-gap: 20px;
  grid-column-gap: 20px;
  grid-row-gap: 20px;

根据最新标准，上面三个属性名的grid-前缀已经删除，grid-column-gap和grid-row-gap写成column-gap和row-gap，grid-gap写成gap。

grid-row-gap | row-gap

属性设置行与行的间隔（行间距）

grid-column-gap | column-gap

属性设置列与列的间隔（列间隔）

gap | grid-gap

grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式，gap是grid-gap的简写形式

gap 如果只写了一个参数，浏览器会认为第二个值等于第一个值，（推荐使用框内写法）

3. grid-template-areas 属性 **

网格布局允许制定“区域”（area），一个区域由当额或多个单元格组成。grid-template-areas用于定义区域

需要和grid-area配合使用，grid-area 属性指定项目放在哪个区域

如果某些区域不需要利用，则使用"."点表示

项目grid-area属性会介绍

4. grid-auto-flow

    grid-auto-flow: row;

控制自动布局算法怎么运作，精确指定在网格中被自动布局的元素怎样排列。默认值是row,放置顺序是“先行后列”，即先填满第一行，在开始放第二行;column 是“先列后行”

grid-auto-flow: column

grid-auto-flow: row

grid-auto-flow: row dance;

盒子设置 row dance, 项目设置grid-column-start和grid-column-end 决定占当前行的几份,dance 会补全当前行剩余空间

5. justify-items align-items

.container {
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
}

justify-items 设置单元格内容的水平位置（左中右），align-items 设置单元格内容的垂直位置（上中下）

这两个属性写法完全相同，都可以取下面这些值

start：对齐单元格的起始边缘。
end：对齐单元格的结束边缘。
center：单元格内部居中。
stretch：拉伸，占满单元格的整个宽度（默认值）。

6. place-items 属性是 align-items 属性和 justify-items 属性的合并简写形式

 place-items: <align-items> <justify-items>;

7. justify-content align-content

.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 - 容器内部居中。
stretch - 项目大小没有指定时，拉伸占据整个网格容器。
space-around - 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍。
space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔。
space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。

8. `place-content`属性是`align-content`属性和`justify-content`属性的合并简写形式。如果省略第二个值，浏览器就会假定第二个值等于第一个值。

    place-content: <align-content> <justify-content>

9. grid-auto-columns 属性， grid-auto-rows 属性

.container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  grid-auto-rows: 50px; 
}

有时候一些项目的指定位置在现有网格的外部，这时浏览器会自动生成多余的网格，以便放置项目。

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

2.3 项目案例

  <div class="container">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    <div class="item item5">5</div>
    <div class="item item6">6</div>
    <div class="item item7">7</div>
    <div class="item item8">8</div>
    <div class="item item9">9</div>
    <div class="item item10">10</div>
    <div class="item item11">11</div>
    <div class="item item12">12</div>
  </div>

1. grid-column-start、grid-column-end、grid-row-start、grid-eow-end

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

2. grid--column、grid-row

.item {
  grid-column: <start-line> / <end-line>;
  grid-row: <start-line> / <end-line>;
}

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

grid-column-start和grid-column-end
grid-column
grid-row-start 和 grid-row-end
grid-row
span 关键字表示跨越，左右边框（上下边框）之间跨越多少个网格

.item1 {
  grid-row: span 2;
  grid-column: span 2;
}

3. grid-area

.item {
  grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
}

属性指定项目放在哪个区域，需要配合容器属性 grid-template-areas: "a a a" "b b b" "c c c";

自定义区域定义

4. justify-self 属性， align-self 属性， place-self 属性

.item {
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
  place-self: <align-self> <justify-self>;
  //place-self: center;
}

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

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

place-self属性是align-self属性和justify-self属性的合并简写形式。如果省略第二个值，place-self属性会认为这两个值相等。

start：对齐单元格的起始边缘。
end：对齐单元格的结束边缘。
center：单元格内部居中。
stretch：拉伸，占满单元格的整个宽度（默认值）。

2.4 使用grid制作骰子

点击按钮切换布局

扩展

cssgridgarden.com/#zh-cn gridGame 小游戏

cssgrid-generator.netlify.app/ 生成布局代码

3. grid 和 flex 区别

grid 布局和 flex布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。

flex 是轴线布局，只能指定“项目”针对轴线的位置，可以看作是一维布局。grid 布局则是将容器划分为“行”和“列”，产生单元格，然后指定“项目所在”的单元格，可以看作是二维布局。grid 布局要比 flex 布局强大

3.1 兼容性

下图可以看出大部分浏览器对 css grid 的支持还是不错的，flex 在 IE10 上面可以使用的属性也非常有限。

grid
flex

grid布局 和 flex 布局及其区别