flex布局中子元素宽度问题导致最后子元素margin失效
一、遇到的问题
前几天写一个网站的时候,使用 margin-right
实现的动画。
比如 :
@keyframes movefromright{
from{
opacity:0;
margin-right:-100px;
}
to{
opacity:1;
margin-right:0px;
}
}
功能很明显,表面上是从右边界移入的。
但是发现好几个div
的右边移入效果都无法实现,而且都是最后一个box。(我在好多的box上用到这个动画)
比如 有两个box,他们宽度是不同的,比如一个是 45% 一个是 50%:
在线调试:
可以发现,margin-right失效了,无论加或者不加都没效果
因为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)均能够解决这个问题。
具体使用哪个, 需要根据实际的情况去操作。
文章版权:Postbird-There I am , in the world more exciting!
本文链接:http://ptbird.cn/flex-margin-no-work.html
转载请注明文章原始出处 !
扫描二维码,在手机阅读!