一、遇到的问题

前几天写一个网站的时候，使用 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