1.grid布局
容器属性：
①display属性
display:grid容器是块级元素
display:inline-grid 容器为行内元素
②grid-template
grid-template-columns设置列宽
grid-template-rows设置行高
.wrapper {
display: grid;
/* 声明了三列，宽度分别为 200px 100px 200px */
grid-template-columns: 200px 100px 200px;
grid-gap: 5px;
/* 声明了两行，行高分别为 50px 50px */
grid-template-rows: 50px 50px;
}
repeat()函数
简化重复的值
接收两个参数：重复的次数，要重复的值
如grid-template-rows:repeat(2,50px)等效于...:50px 50px
auto-fill关键字
自动填充，让一行/列尽可能容纳更多的单元格
grid-template-columns:repeat(auto-fill,200px)
表示每个元素列宽200px，但列的数量不固定
fr关键字
fr单位代表网格容器可用空间的一等份
grid-template-columns:200px 1fr 2fr
表示第一个列宽200px，剩下两个占据剩余宽度的1/3和2/3
minmax()函数
长度范围
auto关键字
由浏览器决定长度
grid-template-columns:100px auto 200px
中间的由浏览器决定
③grid-gap
grid-row-gap设置行间距 grid-column-gap设置列间距
grid-gap:10px 20px
表示行间距10px列间距20px
④grid-template-area
grid-area指定项目放在哪个区域
.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;
}
⑤grid-auto-flow
指定网格中被自动布局的元素怎样排列
默认值是row 先行后列
grid-auto-flow:row dense 尽可能填满表格
⑥justify-items...
justify-items设置单元格内容的水平位置（左中右）
align-items设置单元格的垂直位置（上中下）
start对齐单元格的起始边缘
end对齐结束边缘
center单元格内部居中
stretch拉伸占满单元格的整个宽度
⑦justify-content
justify-content设置整个内容区域在容器中的水平位置（左中右）
align-content垂直位置
start end center stretch同上
space-around每个项目两侧的间隔相等
space-between项目之间的间隔相等 项目和容器边框之间没有间隔
space-evenly项目之间间隔相等 项目和容器边框也是同样长度的间隔
实战-实现响应式布局
2.flex布局
弹性盒子布局
display:flex指定任一容器为flex布局
行内元素也可以使用flex布局
display:inline-flex
基本概念
采用flex布局的元素：flex容器
它的所有子元素：flex项目
容器默认有两条轴：水平的主轴 垂直的交叉轴
项目默认沿主轴排列
容器属性：
①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占满容器的高度
⑥align-content
定义了多根轴线的对齐方式
项目属性
①order
定义项目的排列顺序 数值小的在前 默认值为0
②flex-grow
定义项目的放大比例
默认值为0，即存在剩余空间也不放大
所有项目的flex-grow都为1，它们等分剩余空间
③flex-shrink
定义了项目的缩小比例
默认为1，即空间不足该项目缩小
负值对该属性无效
④flex-basis
定义了在分配多余空间前，项目占据的主轴空间
浏览器根据该属性计算主轴是否有多余空间
默认值为auto，即项目的本来大小
flex-basis:<length>|auto;
可以设为和width或height一样的值，则项目将占据固定空间
主轴为水平时，设置了flex-basis，设置的项目宽度值将失效
flex-basis需要跟flex-grow和flex-shrink配合使用才能生效
特殊值：
flex-basis值为0%，项目尺寸会被认为是0
⑤flex
是flex-grow flex-shrink flex-basis的简写
默认值 0 1 auto
属性快捷值：auto(1 1 auto)和none(0 0 auto)
