</div>

我们还可以设置动画的执行次数，修改上面的样式为 .box { width: 100px; height: 100px; background-color: aqua; animation-name: move; animation-duration: 1s; /* 播放次数默认值为 1 */ animation-iteration-count: infinite; } 复制代码

我们发现动画执行完毕后，盒子突然就回到了原位置，这个过程有点突兀，我们希望这个过程也是慢慢过渡的，那么我们可以设置animation-direction，animation-direction有四种取值

normal：默认值，正常播放 reverse：反向播放 alternate：如果动画次数在两次或两次以上，那么第偶数次为反向播放，就可以达到回到原位置时也有过渡的效果。若动画只播放一次，则和正向播放一样。 alternate-reverse：若动画只播放一次，则和反向播放一样。若播放两次以上，偶数次效果为正向播放

.box:hover { animation-name: move; animation-duration: 1s; animation-iteration-count: 2; animation-direction: alternate; } 复制代码

animation-play-state用来设置动画的播放状态，有两种取值

running：默认值，动画运行 paused：动画暂停

将样式修改为 .box { width: 100px; height: 100px; background-color: aqua; animation-name: move; animation-duration: 1s; animation-iteration-count: infinite; animation-direction: alternate; }

.box:hover { /* 当鼠标放上去时 动画暂停 */ animation-play-state: paused; } 复制代码

animation-fill-mode用来定义动画开始帧之前和结束帧之后的动作，有以下四种取值

none：默认值。动画结束后，元素移动到初始状态(不一定0%的状态，是元素自身的属性值) forwards：元素停在动画结束时的位置(不一定是100%的位置，有可能反向运动) backwards：在animation-delay的时间内，元素立刻移动到动画开始时(不一定是0%，有可能反向运动)的位置。若元素无animation-delay时，与none的效果相同 both：同时具有forwards和backwards

修改样式如下 .box { width: 100px; height: 100px; background-color: aqua; }

.box:hover { animation-name: move; animation-duration: 1s; /* 动画结束后，停留在动画结束的位置 */ animation-fill-mode: forwards; } 复制代码

CSS3 flex布局 当一个父元素被设置为display:flex时，它就是弹性布局，子元素的float、clear和vertical-align属性将失效。此时我们把父元素称之为container(容器)，把子元素称之为item(项目)。当父元素被设置为弹性布局后，对子元素有什么影响? 先来感受一下

<style>
    .container {
        display: flex;
        width: 500px;
        height: 400px;
        background-color: crimson;
    }

    .item {
        width: 100px;
        height: 100px;
        background-color: aqua;
        position: relative;
    }
    
    /* 这个是为了演示方便 样式不重要 不必细看 */
    .item div{
       width: 50%;
       height: 50%;
       position: absolute;
       /* 下面三行语句是为了设置居中对齐 */
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       background-color: brown;
       /* 圆角边框 */
       border-radius: 50%;
       /* 下面两行设置文字居中对齐 */
       text-align: center;
       line-height: 50px;
       /* 设置字体样式 */
       font-size: 30px;
       font-weight: 700;
       color: white;
    }
</style>

当父元素设置为flex布局后，其子元素item会在父元素container的主轴上排列。 这里又牵涉到新的概念，主轴(main axis)，flex容器的主轴默认为X轴，即从左向右，既然有主轴，那么就会有侧轴(cross axis)，默认的侧轴为Y轴，即从上往下。 container上的属性 直观的感受了一下flex的效果，现在我们来看看flex要设置哪些属性，首先设置在container的flex属性有

flex-direction flex-wrap flex-flow justify-content align-items align-content

下面来一一介绍。 flex-direction是用来设置主轴的，它有以下四个值可选

row：默认值，主轴为水平方向，起点在左端。 row-reverse：主轴为水平方向，起点在右端。 column：主轴为垂直方向，起点在上沿。 column-reverse：主轴为垂直方向，起点在下沿。

现在我们分别修改container里面的样式 flex-direction: row-reverse; 复制代码

flex-direction: column; 复制代码

flex-direction: column-reverse; 复制代码

为了演示flex-wrap，我们添加9个item(此时flex-direction为默认值row，除非特别声明，否则我们在演示其一个flex属性时，会将其他flex属性设置为默认值)

我们发现9个item排成了一排，没有换行。为了使得item能够换行，我们需要设置flex-wrap，它有三个值可选

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

flex-wrap: wrap; 复制代码

flex-wrap: wrap-reverse; 复制代码

flex-flow是flex-direction和flex-wrap两个属性的简写，默认值为row wrap flex-flow: || ; 复制代码justify-content是用来设置item在container在主轴上的对齐方式的，具体对齐方式与轴的方向有关,下面假设主轴为从左到右(row)。有下面几种值可选

flex-start：左对齐 flex-end：右对齐 center：居中对齐 space-between：两端对齐，项目之间间隔相等 space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

这里演示一下space-between和space-around justify-content: space-between; 复制代码

justify-content: space-around; 复制代码

align-items定义了在侧轴上的对齐方式(以从上往下的侧轴为例)

first-start：往上对齐 first-end：往下对齐 center：居中对齐 baseline：item的第一行文字的基线对齐。 stretch：默认值，如果没有设置height或者height设置为auto，将占满整个容器的高度

这里演示一下stretch，不设置height .container { display: flex; width: 500px; height: 400px; background-color: crimson; align-items: stretch; } .item { width: 100px; /* height: 100px; */ background-color: aqua; position: relative; }

.item div { /* 修改line-height为200px使文字居中 */ } 复制代码

align-content，当我们设置flex-wrap为wrap或者wrap-reverse时，item会占据多行，这个属性是用来设置占据多行item在侧轴上的对齐方式，如果没有多行，这个属性无效。有下列值可选(以侧轴为从上往下为例)

first-start：往上对齐 first-end：往下对齐 center：居中对齐 stretch：默认值，轴线占据整个侧轴 space-between：两端对齐，轴线之间平均分布 space-around

item上的属性 下面6个属性是设置在item上的

order flex-grow flex-shrink flex-basis flex self-align

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0，现在设置第2个item的order为1 .item:nth-child(2){ order: 1; } 复制代码

如果存在剩余空间，那么flex-grow可以用来设置item占据剩余空间的份数(这会导致item增大)，默认值为0，意味着即使有剩余空间，也不增大，现在设置各自的flex-grow .item:first-child { /* 第一个item占 1 / (1 + 2 + 1) = 1/4 的剩余间 / flex-grow: 1; } .item:nth-child(2) { / 第二个item占 2/4 的剩余空间*/ flex-grow: 2; } .item:last-child { /* 第三个item占 1/4 的剩余空间 */ flex-grow: 1; } 复制代码

flex-shrink与flex-grow相反，当空间不足时，item缩小的以使得所有item被包含在container中。默认值是1，即每个item会等比例缩小 .item:first-child { flex-shrink: 2; } .item:nth-child(2) { flex-shrink: 2; } .item:last-child { flex-shrink: 2; } 复制代码

可见第一个、第二个和最后一个缩小的更多。 flex-basis的含义是item在被放进container之前的大小。也就是item理想或假设的大小。默认值为auto，如果不设置这个值，并且主轴是row的话，那么flex-basis就是width的大小，如果主轴是column的话，那么flex-basis就是height的大小，如果width或height也没有设置的话，flex-basis是content的大小。item的宽度是最终的flex-basis，最佳的方法是只使用flex-basis而不是width或height属性。 但是flex-basis不能保证其大小! 一旦将item放入flex容器中，flex-basis的值就无法保证了。这是因为有flex-grow和flex-shrink，可能会被放大或者缩小item的大小。 除此之外，flex-basis还受到min-width, max-width, min-height, max-height的约束。具体见The Difference Between Width and Flex Basis这篇文章，有着十分详细的阐述，绝对让你物超所值。 slef-align属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。 .container { ... ... align-items: center; flex-wrap: wrap; } .item:first-child { align-self: flex-start; } 复制代码

作者：lastknight 链接：juejin.cn/post/684490… 来源：掘金 转发---lastknight