grid布局
1、grid是属于网格布局，自动将元素分隔
2、grid的属性有
一：设置grid布局
display:grid / inline-grid;
划分行列：
1、grid-template-colunms表示列
grid-template-rows表示行
例如：
为元素设置
grid-template-rows: 100px 100px 100px 100px;
grid-template-columns: 100px 100px 100px 100px;
该属性意思为：
将元素设置为4行4列的格子，并且格子高度和宽度都为100px
one-two-three-four每个属性为第n行/列的属性设置
2、auto-fill代表元素每一行每一列尽可能多的占用这个单元格，
会自动进行填充，直至占满整个div，属性如下适用
grid-template-columns:repeat(auto-fill,100px);
3、fr
fraction的缩写，表示片段，用来表示比例关系
例如：
grid-template-columns:1fr 1fr;
grid-template-rows:130px 1fr 2fr
该属性代表的意思为单元格后面的元素是前者元素的2倍高度或者是宽度
4、minmax()函数
minmax()函数产生一个长度范围，表示长度就在这个范围之中。
它接受两个参数，分别为最小值和最大值。
上面代码中，minmax(100px, 1fr)表示列宽不小于100px，不大于1fr。
5、auto关键字
auto关键字表示由浏览器自己决定长度
例如：grid-template-columns: 100px auto 100px;
第二列的宽度，基本上等于该列单元格的最大宽度，除非单元格内容设置了min-width，且这个值大于最大宽度。
6、网格线的名称
grid-template-columns属性和grid-template-rows属性里面
还可以使用方括号，指定每一根网格线的名字，方便以后的引用。
例如：
grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
上面代码指定网格布局为3行3列，因此是有4根垂直线和水平线
方括号分别为这些线的名称
注意：在网格布局中，一条线允许有多个名字
比如:
[fifth-line row-5]
7、布局的实例
利用网格式布局，两栏式的布局只需要一行代码就可以实现
grid-template-columns:70% 30%;
这行代码的意思就是，第一列是70%的宽度，第二列是30%的宽度
传统式的12网格布局也是非常的简单
grid-template-columns: repeat(12, 1fr);
3、grid的设置行列间隔
grid-row-gap表示行间隔
grid-column-gap表示行间隔
grid-gap是前面行列两者的缩写,第二个值省略时，则默认等于第一个值，
先声明的参数是行，后面的是列的属性值
4.指定单元格的某个指定区域
grid-template-areas用于指定某块区域，可以由一个单元格或多个单元格组成
实例如下：
1):首先是为单元格设置了行高列高
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-template-areas: 'a b c'
'd e f'
'g h i';
如上的代码含义为：划分为9个单元格，从右到左，
每个区域是3个单元格，按顺序设置了名称a-i
2):设置单元格行高列高
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-template-areas: 'a . c'
'd . f'
'g . i';
如上的代码含义是将没用的单元格舍弃，.代表不需要利用的单元格(用.来代替)
5、单元格的排放顺序(先行后列或先列后行)
grid-auto-flow决定子元素的排放顺序
grid-auto-flow: column; /*先列再行*/
grid-auto-flow: row; /*先行再列*/
grid-auto-flow: column dense; /*先列再行并尽可能填满*/
grid-auto-flow: row dense; /*先行再列并尽可能填满*/
6、单元格的位置排放
单元格的位置
一共有三个属性
justify-items来设置水平单元格位置
align-items来设置垂直单元格位置
palce-items是上面两者的缩写
start是对齐单元格的起始边缘
end：对齐单元格的结束边缘
center：单元格内部居中
stretch：拉伸，占满单元格的整个宽度（默认值效果）
justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
place-items: <align-items> <justify-items>;
7、内容区域在容器中的位置
justify-content:设置整个内容在容器中的水平位置
align-content设置整个内容区域在容器的垂直位置
palce-content是上面两个元素的缩写
space-around项目两侧间隔相等，两侧留白
space-between项目与项目间隔相等
space-evenly项目之间间隔相等，容器与项目边框间隔也相等
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-items: <align-content> <justify-content>;
二：项目属性
1、指定项目位置
grid-column-start属性：左边框所在的垂直网格线
grid-column-end属性：右边框所在的垂直网格线
grid-row-start属性：上边框所在的水平网格线
grid-row-end属性：下边框所在的水平网格线
示例：
1):下面指定了1号项目左边框是第2根垂直网格线，右边框是第四根垂直网格线
.item-1 {
grid-column-start: 2;
grid-column-end: 4;
}
2):span表示跨越几个网格
以下代码表示1号项目跨越2个网格
.item-1 {
grid-column-start: span 2;
grid-column-end: span 2; /*两者效果一样*/
}
3):grid-column是grid-column-start和grid-column-end的缩写
grid-row是grid-row-start和grid-row-end的缩写
使用方法如下
.item {
grid-column: <start-line> / <end-line>;
grid-row: <start-line> / <end-line>;
}
2、指定项目放置区域
grid-area表示项目放在哪一区域
示例：
item-1:{
grid-area：e ;
}
表示将item-1指定放在e的区域
当然grid-area还可以用作
grid-row-start、grid-column-start、
grid-row-end、grid-column-end的合并简写
用法为：
.item {
grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
}
3、指定单元格位置
与上述容器属性的单元格位置justify-items完全相同，但是这只针对单个项目属性
justify-self设置单个单元格的水平位置
align-self设置单个单元格的垂直位置
place-self以上两个元素的缩写
justify-self: start | end | center | stretch;
align-self: start | end | center | stretch;
place-self: <align-self> <justify-self>;
flex布局
基本上，Flex项目是沿着主轴(main axis)(从main-start向main-end)或者侧轴（cross axis）(从cross-start向cross-end)排列。
- main axis:Flex 容器的主轴主要用来配置Flex项目。注意，它不一定是水平，这主要取决于
flex-direction属性。
- main-start | main-end:Flex 项目的配置从容器的主轴起点边开始，往主轴终点边结束。
- main size:Flex 项目的在主轴方向的宽度或高度就是项目的主轴长度，Flex 项目的主轴长度属性是 width 或 height 属性，由哪一个对着主轴方向决定。
- cross axis:与主轴垂直的轴称作侧轴，是侧轴方向的延伸。
- cross-start | cross-end: 伸缩行的配置从容器的侧轴起点边开始，往侧轴终点边结束。
- cross size:Flex 项目的在侧轴方向的宽度或高度就是项目的侧轴长度，Flex 项目的侧轴长度属性是
width或height属性，由哪一个对着侧轴方向决定。
容器属性
display
这个属性是定义在弹性容器上的；根据其值决定是内联还是块布局。这时它的直属下级将会变成flex文档流。
.container {
display: flex; /* or inline-flex */
}
Flex 容器不是块容器，因此有些设计用来控制块布局的属片在 Flexbox 布局中不适用。特别是：多列组中所有
column-*属性、float、clear属性和vertical-align属性在 Flex 容器上没有作用。
如果元素
display的值指定为inline-flex，而且元素是一个浮动元素或绝对定位元素，则display的计算值是flex。
flex-direction
这个是建立在主轴上的，从而定义了 Flex 项目放置在 Flex 容器的方向。FlexBox 是单方向的布局概念。可以将弹性项视为主要布置在水平行或垂直列中。
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
row(默认值):如果书写方式是ltr，那么 Flex 项目从左向右排列；如果书写方式是rtl，那么Flex项目从右向左排列
row-reverse:如果书写方式是ltr，那么Flex项目从右向左排列；如果书写方式是rtl，那么Flex项目从左向右排列
column:和 row 类似，只不过方向是从上到下排列
column-reverse:和 row-reverse 类似，只不过方向是从下向上排列
flex-wrap
弹性项默认会全部集中在一行。你可以使用这个属性来改变这种情况，让他们根据你的需要进行自动换行。文档方向在这里也起作用，决定了新的一行被堆叠的方向。
nowrap（默认）：单行显示。在ltr排版下，项目自左向右；在rtl下，自右向左
wrap：多行显示。在ltr排版下，项目自左向右；在rtl下，自右向左
wrap-reverse：多行显示。与wrap相反
flex-flow
它是 flex-direction 和 flex-wrap 的简写形式。它同时定义了弹性容器的主轴和侧轴。默认是 row nowrap。
.container {
flex-flow: column wrap;
}
justify-content
这属性是用来定义主轴上的对齐方式的。当所有的弹性项在一行并且无法弹性伸展，或者可伸展但是达到了最大尺寸，它能帮助分配剩下的多余空间。并且当他们行内溢出时，这个属性也可以对项目对齐施加一些控制。
.container {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}
flex-start（默认）：子项会从一行的起始处开始放置
flex-end：子项会从一行的结尾处开始放置
center：子项会集中在一行的中央
space-between：子项会被均匀的分布在行内；首项放置在一行的开始，尾项放置在一行的结束
space-around：子项会均匀的按照同等距离分布在一行。需要注意的是，在视觉上会觉得并不等距，因为所有子项在两侧都需要加上同等的空间。首项会与容器开始边缘有一个单位空间的距离，但是与下一项会有两个单位空间的距离，因为下一项也有它自己的适配空间。
注意这里仅仅罗列除了部分的属性，因为浏览器的支持是不同的。例如 space-between 在某些版本的 Edge 还不支持，Chrome 中没有对 start/end/left/right支持。MDN有详细的图表。最安全的值是 flex-start ，flex-end 和 center 。
align-items
这用来定义弹性项目在弹性容器的当前侧轴上的默认行为。可以认为是侧轴版的 justity-content。
.container {
align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}
flex-start：弹性项在侧轴起点边的外边距紧靠住该行在侧轴起始的边。
flex-end：弹性项在侧轴起点边的外边距紧靠改行在侧轴结尾的边。
center：弹性项会被放置在侧轴的中央。
baseline：弹性项会根据他们的基线对齐。
- stretch（默认）：在侧轴方向上拉伸弹性项以致填充满弹性容器。（仍然受min-width/max-width的控制）
align-content
这个属性会根据在侧轴上的额外空间来排列容器的行，类似于justify-content在主轴在对齐单个弹性项的方式。
注意，这个属性对于只有单行的弹性项来说是没有效果的。
flex-start：行会紧靠容器的起始位
flex-end：行紧靠容器的结束位
center：行紧靠容器的中间位
space-between：每行会均匀分布；首行在容器起始处而最后行在容器结束处
space-around：每行根据相同的距离均匀的分布
stretch：每行将会伸展以占用剩余的空间。
子项目属性（Flex items）
order
默认情况下，弹性项目文档流顺序排列。但是，可以使用 order 属性来控制它在 flex 容器中出现的顺序。
.item {
order: 5; /* default is 0 */
}
flex-grow
它定义了 Flex 项目在必要时的增长能力。它接收一个不带单位的值作为比例。这个值决定了弹性项目可以占用多少空间。如果所有的项目的值都设置为1，那么容器内剩余的空间将会被平均分配给所有的项目。如果其中一个值是2，那么这个项目占据的空间会是其他项目的两倍。
.item {
flex-grow: 4; /* default 0 */
}
负数无效。
flex-shrink
这定义了 flex 项目在必要时收缩的能力。
.item {
flex-shrink: 3; /* default 1 */
}
负数无效。
flex-basis
这定义了，当一个元素在被分配到剩余空间之前的默认大小。它可以是一个长度（如：20%，5rem等）或者一个关键字。auto关键字的意思就是『按照我的宽度和高度属性调整尺寸』（他会暂时根据main-size来布局大小直到被弃用）。如果使用关键字content，意思就是『基于内容调整大小』——不过这个关键字并一定能很好的工作，因此很难去测试或者知晓它的兄弟们max-content，min-content和fit-content做了什么。
.item {
flex-basis: <length> | auto; /* default auto */
}
如果设置为0，额外空间内容不会被分解开来。如果设置成auto，额外空间会基于它的flex-grow的值进行分布。
felx
这是flex-grow, flex-shrink和flex-basis组合的简写。第二个和第三个参数（flex-shrink和flex-basis）是可选的。默认为0 1 auto，但如果您将其设置为单个数值，则类似于 1 0。
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
推荐你使用的这种缩写属性,这比设置单独属性更好。可以智能的通过缩写形式设置值。
align-self
这个属性可以覆盖单个 align-items设置的对齐方式,或者指定单个项目的对齐方式。
请参阅 align-items 说明以了解可用值。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
