一、遇到的问题

前几天写一个网站的时候,使用 margin-right 实现的动画。

比如 :

@keyframes movefromright{
    from{
        opacity:0;
        margin-right:-100px;
    }
    to{
        opacity:1;
        margin-right:0px;
    }
}

功能很明显,表面上是从右边界移入的。

但是发现好几个div的右边移入效果都无法实现,而且都是最后一个box。(我在好多的box上用到这个动画)

比如 有两个box,他们宽度是不同的,比如一个是 45% 一个是 50%:

在线调试:

http://jsfiddle.net/udgqepzy/

可以发现,margin-right失效了,无论加或者不加都没效果

2-1.png

2-2.png

因为flex-item没有撑满整个box,所以margin也是失效的。

撑满: 这里的撑满不是传统意义的铺满,而是flex中,item所占的空间

二、解决

1、 嵌套box

segmenfault中有人提出,可以使用一个嵌套的box来解决。

比如在wrapper上加一个container,然后将container设置的小一些,然后wrapper设置的大一些。

这样 wrapper在flex的时候就不会出现没有铺满的情况。

但是这种情况会出现overflow,并不是都适用。

segmenfault地址:

2、使用 justify-content

经过测试,我发现 juestify-content:space-between; (space-around/center)均能够解决这个问题。

具体使用哪个, 需要根据实际的情况去操作。

2-3.png