【PM学前端】之Flex布局

背景

布局，我最常用的是flex布局，因为这种布局一方面能满足我遇到的所有需求，另一方面是因为我基本没用过其他布局，所以对这个布局的优缺点不是很清除。

最佳实践

flex容器

display:flex 使用这条命令定义一个flex容器。定义的容器包含默认属性，例如横向排列。

flex容器的属性

以下是 flex 容器属性：
flex-direction ：设置容器里item的排列方向的。
flex-wrap ：当容器宽度改变时，item是否自动换行。一般设置成fwrap就能实现自适应。
flex-flow : 简写形势 同时设置方向 和wrap
justify-content : 设置容器内的元素如何对齐。
align-items : 这个也是对其，不过对其
align-content

justfy-content

center 值将 flex 项目在容器的中心对齐。
“justify-content: flex-start;” 在容器开头对齐弹性项目（默认），flex-end 值将 flex 项目在容器的末端对齐：
“justify-content: space-around;” 显示行之前、之间和之后带有空格的 flex 项目：

justify-content 与 align-items 的区别

首先先看作用轴，justify-content作用在主轴，align-items作用在交叉轴。
主轴的是由flex-direction定义的，默认情况下，主轴是row，交叉轴是col。

这两个的属性都是一样的，center flex-start flex-end stretch baseline 都是一样的。不一样的是，作用的轴不同。

参考文章

https://www.w3school.com.cn/css/css3_flexbox.asp
https://blog.csdn.net/u014614038/article/details/112062197