animation flex

[Yang03]

animation

属性	描述
@keyframes	规定动画
animation	属性的简写，除了 animation-play-state 属性。
animation-name	规定 @keyframes 动画的名称。
animation-duration	动画持续的时间
animation-timing-function	动画的速度曲线
animation-delay	动画的延迟时间，默认0
animation-iteration-count	动画执行次数，默认1
animation-direction	动画是否在下个周期逆向播放
animation-play-state	动画是否正在运行
animation-file-mode	动画执行完成后的状态

flex

flex-direction定义主轴的方向

• row为默认值，水平，方向为从左到右。
• row-reverse 水平，方向为从右到左。
• column 垂直，方向为从上到下。
• column-reverse 垂直，方向为从下到上。

flex-wrap 定义flex项目是否换行显示

• nowrap为默认值，不换行。
• wrap 换行，默认为第一行在上方。
• wrap-reverse 换行，默认为第一行在下方。

justify-content 定义了项目在主轴上的对齐方式

• flex-start 为默认值，在主轴上向起始方向对齐。
• flex-end代 在主轴上向结束方向对齐。
• center 在主轴上居中对齐。
• space-between 两端对齐，但第一个项目在主轴的起始位置，最后一个项目在主轴的结束位置。
• space-around 主轴上等分间距，但第一个项目与最后一个项目距离主轴的两端保持一定的距离，这个距离为项目之间间距的1/2。

align-items 定义与水平方向垂直的对齐

• flex-start 交叉轴上向起始方向对齐。
• flex-end 交叉轴上向结束方向对齐。
• center 交叉轴上居中对齐。
• baseline 交叉轴上向项目的第一行文字的基线对齐。
• stretch 交叉轴上拉伸对齐。 demo align-items

order 数值越小，排列越靠前，默认值为0

flex-basis 定义元素占据的最小空间

flex-shrink 定义元素占据的缩小比例

flex-grow 定义元素占据的比例

[Yang03]

如何定义一个flex 容器

    .container {
        display: flex;
    }

flex 是一个简写

    flex 1
    /* == */
    flex-grow:1;
    flex-basis:auto;
    flex-shrink: 1;

demo, 左右布局,右边元素固定宽度,左边flex

    .container {
        display: flex
    }

    .left {
        flex: 1
    }
    .right {
        width: 100px
    }

flex-shrink

    flex-shrink: 2  //按照2x倍缩放容器， 默认是1

flex-wrap

    flex-nowrap: nowrap  //(默认), wrap, wrap-reverse

align-content 多行的情况下，在y轴的对齐方式f

flex-start flex-end flex-center 8fed-ac0586efd209.png)

space-between space-around space-evenly strech

[Yang03]

https://developer.mozilla.org/zh-CN/docs/Web/CSS/align-items