flex-小记

学习地址：https://www.cnblogs.com/qcloud1001/p/9848619.html

一、 弹性容器

元素声明属性 display：flex；

1、 属性 flex-direction: row / column / row-reverse / column-reverse;

• 主轴 ：flex-direction：row / column；水平/垂直
• 交叉轴：根据主轴自动变化
• 弹性元素永远沿主轴排列

2、 属性 flex-wrap: wrap / nowrap / wrap-reverse

当弹性容器不够时，设置弹性元素 换行 / 不换行 / 反向换行

3、复合属性 flex-flow：flex-direction + flex-wrap

4、 应对弹性收缩

当 flex-wrap = nowrap 时。
flex-shrink 和 flex-grow 是针对两种不同场景的互斥属性

a、flex-shrink 缩小比例

当且仅当 容器宽度不够时生效
缩小比例时考虑弹性元素的大小，以防本身宽度较小的元素宽度被减为0。
eg. 有三个弹性元素，flex-shrink 值分别为 sh1，sh2，sh3.
容器剩余宽度为 -width。
sh = sh1 * wid1 + sh2 * wid2 + sh3 * wid3
dom1.newWidth = wid1 + sh1 * wid1 / sh *（-width）

b、flex-grow 放大比例

当且仅当容器有富余宽度 且 元素设置了 flex-grow 生效
eg.
容器剩余宽度 width
gr = gr1 + gr2 + gr3
grA = width / gr
dom1.newWidth = wid1 + gr1 * grA

二 、 刚性尺寸 flex-basis

元素在主轴上的初始尺寸
flex-direction 为 row 时，宽度 width （默认情况 为 row）
flex-direction 为 column

1、flex-basis：0；

元素的宽度由内容撑开

2、flex-basis、width 同时设置且皆不为0

两者值相等则等效；
否则， flex-basis 优先级高

3、 flex-basis ：auto

a、没有设置width

宽度由内容撑开

b、设置了width

 宽度为width设置的

三、复合属性 flex

flex = flex-grow + flex-shrink + flex-basis

1、一些简写

flex：1； ------》 flex：1 1 0%；
flex：2； ------》 flex：2 1 0%;
flex: auto; -----》 flex：1 1 auto；
flex：none；------》 flex：0 0 auto； //用于固定尺寸

flex-basis是指定初始尺寸，当设置为0时（绝对弹性元素），此时相当于告诉flex-grow和flex-shrink在伸缩的时候不需要考虑我的尺寸；相反当设置为auto时（相对弹性元素），此时则需要在伸缩时将元素尺寸纳入考虑。

四、容器内对齐

1. 主轴对齐 justify-content

- flex-start
- flex-end
- center
- space-between
- space-around

2. 交叉轴对齐

a. 单行 align-item

默认值: stretch,当未设置具体尺寸,或设置为auto时,撑满交叉轴方向;
否则, 由自身内容或具体的尺寸决定
- stretch
- flex-start
- flex-end
- * baseline  // 沿第一行文字基线对齐 

b. 多行 align-content

与 align-item 类似, 但只对多行有效
- stretch  // 与 align-item的相同
- flex-start
- flex-end
- * space-between
- * space-around

c. 单个元素 align-self

更灵活,设置在元素中
1. 值与align-item相同
2. 可覆盖align-item属性
3. 值为auto,表示继承父元素的align-item

五. 更优雅地调整元素顺序 order

是元素的属性, 默认为0; 值越小,越靠前. 值相同时, 以dom元素顺序为准
元素 {
	order: 3 ;
	}