Flex弹性盒布局尾

项目的属性

order 定义项目的排列顺序，数值越小排列越靠前，默认为0

flex-grow 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大

flex-shrink 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小

flex-basis 定义在分配多余空间之前，项目占据的主轴空间

flex 是复合属性，代表flex-grow, flex-shrink 和 flex-basis的简写

align-self 定义交叉轴上的对齐方式

order

定义项目的排列顺序。数值越小，排列越靠前，默认为0

order: <数值/integer>;

属性值

推荐为 0 或者 非负整数

设置了order属性，会按照order属性的值大小排列

flex-grow

定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。主要作用是：分配剩余空间的

flex-grow: <number>;

属性值

不能为负数，虽然可以设置为正小数值，一般不这么用

平均分配的含义是，去掉内容之后的空间进行均分，如果本身内容就多，虽然均分，但还是占比较大的空间

flex-shrink

定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。主要作用是做缩小空间用的

flex-shrink: <number>;0，当父元素不足的时候，表示固定的宽度不会被缩小，按照原来的设置显示，

负值对该属性无效，空间足够不会按比例缩小

flex-basis

flex-basis和width，flex-basis优先级比width要大

在flex-grow 和flex-shinrk属性起作用以前，定义每一个flex项目的默认大小，它的默认值为auto，即项目的本来大小

flex-basis: auto || <length>;

length: 我们平常用的一些属性值，如 px、%、 rem等

Flex

是一个复合属性，代表flex-grow, flex-shrink 和 flex-basis的简写，后两个属性可选，默认值为0 1 auto

flex: auto | <'flex-grow'> [ <'flex-shrink'>  <'flex-basis'> ];

两个快捷值

flex：auto代表 (1 1 auto)

flex：none代表 (0 0 auto)

align-self

交叉轴上的对齐方式，允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性

align-self: auto | flex-start | flex-end | center | baseline | stretch;

属性值

默认值为auto，表示继承父元素的align-items属性

可以取6个值，除了auto，其他都与align-items属性完全一致

flex布局注意点

flex-direction的改变，一些依赖于主轴定义的属性也跟着改变

justify-content

align-content

align-items

容器转为flex布局之后，项目不受float的影响

flex-wrap的默认是nowrap，我们需要设置才会自动换行

知识补充：

calc属性：计算尺寸，无法在行内设置，须在css样式中设置

calc:width:calc(100vw - 100px);

calc只针对加减，加号和减号之间必须加上空格；

var属性

先定义一个颜色

：root:{

--blue属性值：颜色

}

使用颜色：例：color:var(--blue)

animation-fill-mode

Backwards：默认值

animation-fill-mode:forwards动画结束后，停到结束的位置,不返回

animation-play-state: paused|running;
paused 规定动画已暂停。
running 规定动画正在播放。

可以利用hover来设置,鼠标摸上的时候停止:animation-play-state : paused

iframe标签 

iframe标签 可以嵌套一个html页面，frameborder为边框，一般设置为0.