关于倒在flex上的那些事

Posted 2021-05-25 狗子你终于回来了

首先每个容器都可以开启弹性布局：display：flex或者display：inline-flex，如果浏览器兼容加上-webkit

理解两个概念：容器和项目
容器即为你要在什么地方开启弹性布局，就是一般为外层的div
项目即为你想设置分布位置的子div

即然分为父和子，那么两者都有不同的属性才对

容器：
flex-direction: row | row-reverse | column | column-reverse; ---> 主轴方向
flex-wrap：nowrap | wrap | wrap-reverse; ---> 项目是否换行
flex-flow：相当于flex-direction + flex-wrap 默认值为row nowrap
justify-content：flex-start | flex-end | center | space-between | space-around; ---> 主轴对齐方式
align-items: flex-start | flex-end | center | baseline | stretch; ---> 垂直轴对齐方式
align-content: flex-start | flex-end | center | space-between | space-around | stretch; ---> 多根轴线的对齐方式

项目:
order: ; ---> 排列顺序
flex-grow: ; ---> 放大比例
flex-shrink： ; ---> 缩小比例
flex-basis： | auto; ---> 占据剩余空间，默认auto，本来大小
flex:flex-grow + flex-shrink + flex-basis
align-self: auto | flex-start | flex-end | center | baseline | stretch; ---> 单个设置，覆盖align-items

引用：阮一峰大神的flex教程http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html