Grid布局是将容器划分成“行”和“列”，产生单元格，然后指定“项目所在”的单元格，可以看作是二维布局。
设置css display:grid 或者 display:inline-grid ,都可以将直接将容器能产生单元格的容器
终于搞完了！
[toc]
默认子元素按行排列
Flexbox 布局是一维布局方式，要么按行排列，要么按列排列。
align-items 控制交叉轴， justify-content 控制主轴,始终不变。
flex-basis是用来设置 main size 的。使用 flex-basis，可以同时管理行模式下的宽度和列模式下的高度。
此时 width 失效，但是可以用 min-width 限制
在列模式下，设置高度
flex 容器在有剩余空间的时候，子元素占据剩余空间的占比。适合一些浮动的布局。
超过边界自动换行
