h5c3 part6 flex

1. animation: name duration delay timing-function count forwards

@keyframes name {
0% === from{
}
100% === to{

}
}

没有延迟
animation-fill-mode: forwards 0%动画不会立即执行, 结束时会停留在结束状态
backwards 0%动画会立即执行, 结束时不会停留在结束状态
both 0%动画会立刻执行, 结束时会停留在结束状态

2. 弹性布局

1)开启弹性布局: 给父盒子 display: flex(使每一个子元素编=变成伸缩项)

设置弹性布局属性: 给父盒子

2) (主轴方向的对齐方式)justify-content: flex-start/flex-end/center(从哪里开始,子元素之间没有距离)

space-around(将多余的宽度平均分配给每一个子盒子)

space-between(间隔在两边)

(侧轴方向的对齐方式)align-items: flex-start/flex-end/center
stretch 拉伸
base 基线对齐
(给单个子元素设置) self-align:

问题:子元素成为伸缩盒子之后,有一个问题是: 当子元素跨度大于父元素时, 子元素会平均缩放,直至能够同行显示,
这种情况下, 子盒子自身设置的宽度都是无效的,所有需要flex-flow属性来让它换行

3) (换行)flex-flow : 实质是flex-wrap 和 flex-direction的属性结合
flex-wrap: 控制是否换行, 默认不换行
wrap === 换行
nowrap === 不换行
wrap-reverse === 默认从上都下, 设置之后, 从下往上

flex-direction: 默认是水平方向row
row 主轴方向为x轴, 副轴为y轴
column 垂直方向(当子元素高度和大于父元素高度时, 换列显示)
column-reverse; 垂直排列方向, 从下往上

4)可以联合写: flex-flow: wrap column; (实际应用分开写)

5)flex 是 flex-gorw flex-shrink 的联合属性

　　flex-grow:1; 默认值是0 设置给子元素 每个子元素设置的值不同,根据比例放大

　　flex-shrink: 默认值是1 (所以如果设置为1,那么和其他盒子宽度还是一样) 按比例缩小

　　flex:1; 占父盒子剩余空间;