前端总结100点-1-flex

flex

学习资源

阮一峰的博客
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

不自己敲敲，还是不靠谱

1、容器的属性

// 1.1 主轴方向
flex-direction:row/row-reverse/column/column-reverse;(row)
// 1.2 是否可以换行
flex-wrap:nowrap/wrap/wrap-reverse;(nowrap)
// 1.3 主轴方向、是否换行简写
flex-flow:row nowrap;
// 1.4 主轴上的对齐方式
justify-content:flex-start/flex-end/center/space-between/space-around;(flex-start)
// 1.5 交叉轴上的对齐方式
align-item:flex-start/flex-end/center/baseline/stretch;(flex-start)
// 1.6 多个交叉轴的对齐方式
align-content:flex-start/flex-end/center/stretch/space-between/space-around;(flex-start)

2、 项目的属性

// 2.1 排序编号，数字越小越在前
order: \<integer\>
// 2.2 有剩余空间，放大的倍数
flex-grow:\<number\>;(0)
// 2.3 空间不足的时候，缩小的倍数
flex-shrink:\<number\>;(1)
// 2.4 默认情况下占据主轴的空间
flex-basis:\<length\> | auto;(auto)
// 2.5 空间变化的缩写
flex:none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ];(0 1 auto)
none:0 0 auto; auto:1 1 auto;
// 2.6 单个项目的对齐方式，可覆盖align-item
align-self:auto/flex-start/flex-end/center/beseline/stretch;(auto)

// 85.8