每日学习(1)-Flex

1、概念

flex是Flexible Box 的缩写，弹性布局盒子；

2、常见术语

成员：容器container 项目item

轴： 主轴main-axis  交叉轴cross-axis

线：起始线main/cross-start  结束线main/cross-end

3、容器的属性

1. flex-direction
2. flex-wrap
3. flex-flow  1和2 的组合
4. justify-content
5. align-items
6. align-content  交叉轴行对齐方式 //多行

3.1、flex-direction主轴方向

1. row
2. row-reverse
3. column
4. column-reverse

3.2、flex-wrap 主轴一行满了换行

1. nowrap 不换行、压缩宽度
2. wrap 换行
3. wrap-reverses 反向换行 

3.3、justify-content 主轴元素的对齐方式

1. flex-start 靠着main-start对齐
2. flex-end 靠着main-end对齐
3. center 靠着主轴居中对齐
4. space-between 两端对齐，靠着容器壁，剩余空间平分
5. space-around 分散对齐，不靠容器壁，剩余空间在每个项目两侧平均分配
6. space-evenly  分散对齐，不靠容器壁，剩余空间平分

3.4、align-items item 在交叉轴上对齐方式

1. flex-start 交叉轴的起点对齐；
2. flex-end 交叉轴的终点对齐
3. center 交叉轴的中点对齐；
4. baseline： 项目的第一行文字的基线对齐；
5. stretch 伸展：如果项目未设置高度或者auto，将占满整个容器。 

4、项目元素item的属性 

1. flex-grow: 长大
2. flex-shrink：缩小
3. align-self：覆盖container align-items 属性
4. order： 排序
5. flex-basis ： 有效宽度

4.1、flex-grow长大

在容器主轴上存在剩余空间时，flex-grow才有意义

1. 0  不放大，保持初始值
2. initial  与0 等效
3. n  放大因子：正数； 

4.2、flex-shrink:缩小

当容器主轴“空间不足” 且“禁止换行”时，flex-shrink才有效 

1. 默认值1  允许项目收缩
2. initial 与1等效
3. 0 禁止收缩，保持原始尺寸
4. n 收缩因子：正数

4.3、order排序

将元素重新排序 

默认值0；由小到大排列各项

4.4、flex-basis属性

定义了在分配多余空间之前，项目占据的主轴空间（main size） ；浏览器根据这个属性，激素那主轴是否有多余空间。它的默认值为auto，即项目本来的大小