Flex布局

🌰

总结
用于父元素的属性 display:flex;

flex-direction 修改主轴的方向（本来横着的，加了flex-direction:column 就变竖着的了）

flex-warp 让我们的元素到底换不换行

justify-content Y轴上的分布方式

align-items X轴上的分布方式

---

用于子元素的属性

flex-grow(flex) 占据网页剩余的部分所有的空间

就像这样👇

-|—–|-

（所有都加1会均等的分割，自适应）

flex-shrink 如果父元素一直缩小 会被挤压 可以被压缩的 如果设置为0 是不可被压缩
flex-basis 其实就是初始大小
align-self 会使得父元素赋予它的属性失效，同时它可以有自己的想法
order 更改排序前后顺序权重

---

align-items和justify-content都是用来决定弹性容器内项目的位置
align-items是对项目在容器竖向进行操作的
justify-content是对项目在容器横向进行操作
letter-spacing 字间距