flex 布局的基本概念
flexbox是一种一维的布局，是因为一个flexbox一次只能处理一个维度上的元素布局，一行或者一列。
flexbox 的两根轴线
当使用 flex 布局时，首先想到的是两根轴线 — 主轴和交叉轴。主轴由
flex-direction定义，另一根轴垂直于它。我们使用 flexbox 的所有属性都跟这两根轴线有关，所以有必要在一开始首先理解它。
主轴
主轴由
flex-direction定义，可以取 4 个值：
rowrow-reversecolumncolumn-reverse
如果你选择了 row 或者 row-reverse，你的主轴将沿着 inline 方向延伸。
选择 column 或者 column-reverse 时，你的主轴会沿着上下方向延伸 — 也就是 block 排列的方向。
交叉轴
交叉轴垂直于主轴，所以如果你的
flex-direction(主轴) 设成了row或者row-reverse的话，交叉轴的方向就是沿着列向下的。
如果主轴方向设成了
column或者column-reverse，交叉轴就是水平方向。
更改 flex 方向 flex-direction
在 flex 容器中添加
flex-directio属性可以让我们更改 flex 元素的排列方向。设置flex-direction: row-reverse可以让元素沿着行的方向显示,
把 flex 容器的属性
flex-direction改为column，主轴和交叉轴交换，元素沿着列的方向排列显示。改为column-reverse，起始线和终止线交换。
用 flex-wrap 实现多行 Flex 容器
虽然flexbox是一维模型，但可以使我们的flex项目应用到多行中。在这样做的时候，您应该把每一行看作一个新的flex容器。任何空间分布都将在该行上发生，而不影响该空间分布的其他行
为了实现多行效果，为属性flex-wrap添加一个属性值wrap。现在，如果项目太大而无法全部显示在一行中，则会换行显示。对于flex容器，项目的子元素总宽度大于容器最大宽度。由于flex-wrap的值设置为wrap，所以项目的子元素换行显示。若将其设置为nowrap，这也是初始值，它们将会缩小以适应容器，因为它们使用的是允许缩小的初始Flexbox值。如果项目的子元素无法缩小，使用nowrap会导致溢出，或者缩小程度还不够小。
flex 元素上的属性所有元素都设定了宽度（width）为 100px，所以 flex-basis 的值为 100px。
当flex：1的时候包括哪些属性
flex-growflex-shrinkflex-basis
Flex 元素属性：flex-basis
flex-basis 定义了该元素的空间大小flex 容器里除了元素所占的空间以外的富余空间就是可用空间该属性的默认值是 auto 。此时，浏览器会检测这个元素是否具有确定的尺寸，
当元素设定了宽度（width）为 100px， flex-basis 的值为 100px。
如果没有给元素设定尺寸，flex-basis 的值采用元素内容的尺寸。我们给只要给 Flex 元素的父元素声明 display: flex ，所有子元素就会排成一行，且自动分配小大以充分展示元素的内容。
Flex 元素属性：flex-grow
flex-grow 若被赋值为一个正整数，flex 元素会以 flex-basis 为基础，沿主轴方向增长尺寸。这会使该元素延展，并占据此方向轴上的可用空间）。如果有其他元素也被允许延展，那么他们会各自占据可用空间的一部分。
如果 flex-grow 值为 1，容器中的可用空间会被元素平分。它们会延展以填满容器主轴方向上的空间。
Flex 元素属性： flex-shrink
flex-grow属性是处理 flex 元素在主轴上增加空间的问题，相反flex-shrink属性是处理 flex 元素收缩的问题。如果我们的容器中没有足够排列 flex 元素的空间，那么可以把 flex 元素flex-shrink属性设置为正整数来缩小它所占空间到flex-basis以下。与flex-grow属性一样，可以赋予不同的值来控制 flex 元素收缩的程度 —— 给flex-shrink属性赋予更大的数值可以比赋予小数值的同级元素收缩程度更大。
Grid 布局是什么？
Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。是目前唯一一种 CSS 二维布局。利用 Grid 布局
Grid 布局和 flex 布局
flex 布局和 Grid 布局有实质的区别**flex 布局是一维布局，Grid 布局是二维布局。flex 布局一次只能处理一个维度上的元素布局，一行或者一列。Grid 布局是将容器划分成了“行”和“列”，产生了一个个的网格，我们可以将网格元素放在与这些行和列相关的位置上，从而达到我们布局的目的。
<div class="app">
<div class="one item">1</div>
<div class="two item">2</div>
<div class="three item">3</div>
</div>
.app {
margin: 60px;
/* 声明一个容器 */
display: grid;
/* 声明列的宽度*/
grid-template-columns: repeat(3, 200px);
/* 声明行间距和列间距 */
grid-gap: 20px;
/* 声明行的高度 */
grid-template-rows: 100px 200px;
}
容器和项目：我们通过在元素上声明
display：grid或display：inline-grid来创建一个网格容器。一旦我们这样做，这个元素的所有直系子元素将成为网格项目。
grid-template-columns和grid-template-rows属性来定义网格中的行和列。容器内部的水平区域称为行，垂直区域称为列。
一个网格单元是在一个网格元素中最小的单位， 从概念上来讲其实它和表格的一个单元格很像。上图中
One、Two、Three都是一个个的网格单元
grid-template-columns 属性和 grid-template-rows 属性
grid-template-columns属性设置列宽，grid-template-rows属性设置行高，这两个属性在Grid布局中尤为重要，它们的值是有多种多样的，而且它们的设置是比较相似的
固定的列宽和行高
.app {
display: grid;
/* 声明了三列，宽度分别为 200px 100px 200px */
grid-template-columns: 200px 100px 200px;
grid-gap: 5px;
/* 声明了两行，行高分别为 50px 50px */
grid-template-rows: 50px 50px; }
表示固定列宽为 200px 100px 200px，行高为 50px 50px
repeat() 函数：可以简化重复的值。该函数接受两个参数，第一个参数是重复的次数，第二个参数是所要重复的值。比如上面行高都是一样的，我们可以这么去实现，实际效果是一模一样的
fr 关键字：Grid 布局还引入了一个另外的长度单位来帮助我们创建灵活的网格轨道。fr 单位代表网格容器中可用空间的一等份。grid-template-columns: 200px 1fr 2fr 表示第一个列宽设置为 200px，后面剩余的宽度分为两部分，宽度分别为剩余宽度的 1/3 和 2/3。
.app{
display: grid;
grid-template-columns: 200px 1fr 2fr;
grid-gap: 5px;
grid-auto-rows: 50px;
}
auto 关键字：由浏览器决定长度。通过 auto 关键字，我们可以轻易实现三列或者两列布局。grid-template-columns: 100px auto 100px 表示第一第三列为 100px，中间由浏览器决定长度
.app {
display: grid; grid-template-columns:
100px auto 100px;
grid-gap: 5px;
grid-auto-rows: 50px;
}
grid-row-gap 属性、grid-column-gap 属性以及 grid-gap 属性
grid-row-gap: 10px表示行间距是 10px，grid-column-gap: 20px表示列间距是 20px。grid-gap: 10px 20px实现的效果是一样的
grid-template-areas属性用于定义区域，一个区域由一个或者多个单元格组成
一般这个属性跟网格元素的 grid-area 一起使用，我们在这里一起介绍。 grid-area 属性指定项目放在哪一个区域
