弹性布局flex小结

https://caniuse.com/ 查看css某个属性的兼容情况

calc(25% - 1px)

box-sizing:center-box;向外扩展

box-sizing:border-box;向内扩展

 

父级身上的属性

display:flex;

添加浏览器前缀 -webkit-

PostCss插件 自动加前缀

 

display:-webkit-box;

 

justify-content: 子元素水平排列方式

center 居中

space-between 两端对齐

space-around 子元素拉手分布

flex-start 居左

flex-end居右

 

align-items: 子元素垂直排列方式

center 居中

flex-start 顶部

flex-end 底部

 

align-content 多行的时候，垂直排列

center 居中

flex-start 顶部

flex-end 底部

stretch 默认

 

flex-direction 排列方向

row 横向

row-reverse 横向翻过排列

column 纵向

column-reverse 纵向翻过排列

 

flex-wrap: 子元素是否在一行显示

wrap 换行（包裹）

nowrap 不换行（默认）

 

flex-flow: <flex-direction ><flex-wrap>的简写

 

子级身上的属性

flex:1 1指的是一个系数，把父级分几份，它占几分之几

子元素在划分子元素宽度，先跑除固定宽度

 

flex-grow: 定义子元素放大比例

align-self:flex-start;其实就是用来覆盖父级align-items垂直排列

order: 规定子元素的顺序，排序（数值越小越靠前）

默认值为0