背景
布局,我最常用的是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