flex基础点
flex的两种写法
old：-webkit-box
new: -webkit-flex flex
1.容器 项目
2.主轴 侧轴
3.项目永远排列在主轴的正方向上
老版本
- 容器（注意:项目永远是在主轴上排列的）
- 容器的布局方向(本质上控制的是主轴是哪一根)
box-orient:horizontal (主轴是x轴)
box-orient:vertical (主轴是y轴)
- 容器的排列方向(本质上控制的是主轴的方向)
box-direction:normal(正方向)
box-direction:reverse(反方向)
- 富裕空间的管理(富裕空间的管理不会给项目去分配空间，只是管理富裕空间的位置)
- 主轴(x,y代表主轴是哪一根)
- box-pack
start: 右(x) 下(y)
end: 左(x) 上(y)
center:富裕空间在整体的两边
justify:富裕空间在项目的之间
- 侧轴(x,y代表侧轴是哪一根)
- box-align
start: 右(x) 下(y)
end: 左(x) 上(y)
center:富裕空间在整体的两边
- 项目
新版本
- 容器
- 容器的布局方向(本质上控制的是主轴是哪一根)
flex-direction:row (主轴是x轴)
flex-direction:column (主轴是y轴)
- 容器的排列方向(本质上控制的是主轴的方向)
flex-direction:row (正方向)/ row-reverse (反方向)
flex-direction:column(正方向）/column-reverse(反方向)
- 富裕空间的管理(富裕空间的管理不会给项目去分配空间，只是管理富裕空间的位置,富裕空间的管理默认是作用于每一行的)
- 主轴(x,y代表主轴是哪一根)
-
justify-content:
flex-start：富裕空间在主轴的正方向
flex-end：富裕空间在主轴的反方向
center:富裕空间在两边
space-between:富裕空间在项目之间
space-around(box 没有的):：富裕空间在项目两边
- 侧轴(x,y代表侧轴是哪一根)
-
align-items:
flex-start：富裕空间在侧轴的正方向
flex-end：富裕空间在侧轴的反方向
center：富裕空间在两边
baseline(box 没有的):富裕空间按基线分配
stretch(box 没有的):在项目没有高度的情况实现等高布局（高度默认被拉伸）
- 项目
- 弹性空间的管理（将富裕空间按比例分配到项目上）
flex-grow指定比例
新版本新增的
- 容器
-
flex-wrap（本质上是用来控制侧轴的方向）
-
nowrap:所有元素在一行
-
wrap:元素自动换成多行
wrap-reverse:元素自动换成逆序的多行
-
align-content（控制多行/列时富裕空间的管理，单行/列时不起作用）
- flex-start:多行集中在顶部
- flex-end：多行集中在底部
- center：多行居中
- space-between：行与行之间保持相等距离
- space-around：每行的周围保持相等的距离
-
flex-flow（flex-wrap flex-direction的简写属性，本质上用来控制主轴和侧轴是哪一根，以及他们各自的方向）
- 项目
order(控制项目在主轴上的排列顺序)大的排列在后面，可以为负值-
align-self（(控制项目自己在侧轴上的富裕空间管理,会覆盖align-items的值）
- flex-shrink：收缩因子
- flex-grow：拉伸因子
- flex-basis：基值
- 等分等比布局
- flex :1 (flex-shrink：1 flex-grow：1 flex-basis：0%) ----> 等分等比例布局
多列布局
- 栏目宽度
column-width指定每一栏的宽度（这是多列布局的第一种分法）
- 栏目列数
olumn-count指定要多少栏（这是多列布局的第二种分法）
- 栏目距离
column-gap
- 栏目间隔线
column-rule
注意点
为什么要学习老版本flex?
因为在移动端大多数浏览器上只支持老版本
在老版本的felx中，容器的布局和排列方向是由两个属性四个属性值来控制的
在新版本的felx中，容器的布局和排列方向是由一个属性四个属性值来控制的
flex-direction自带富裕空间的管理
默认值
拉伸因子
flex-grow:0； box-flex:0;
收缩因子
flex-shrink: 1;
