Flex布局
基本可以满足所有需求
容器container
flex布局触发条件
.container{
display:flex;/* or inline-flexx */
}
Flex container样式汇总
flex-direction改变items流动方向
flex-wrap改变折行
justify-content改变主轴对齐方式
align-items改变次轴对齐方式
align-content改变多行内容
Flex item属性汇总
item上面加order
order后面输入数字，排列方式按数字顺序排
item上面加flex-grow
控制如何长胖，不写默认为0，做页面时可以内容为1两边不写
item上面加flex-shrink 控制如何变瘦，不写默认为1同等速度变瘦，0防止变瘦
工作常用代码重点记忆 ！！！
- display: flex
- flex-birection: row/column
- flex-wrap: wrap
- just-content: center/space-between
- align-items:center
Grid 布局
功能最强大的布局方案
grid布局触发条件
写法一 ：
在父元素中写出三行五列，及大小
在子元素调节格子几行几列
写法二
在父元素在写两行三列，及几份
在子元素调节格子几行几列
用这种写法在平均布局时只需要写好间距即可十分方便
高级技巧十分方便
父元素上需要哪些就在相应位置写；
父元素中可以直接写间距grid-row/column-gap:数值
在子元素中把.container>header里面的内容写入grid-area:header中
