margin负值的作用

在做商品列表页的时候,想让列表的元素两端对齐,如果使用display:flex;+justify-content:space-between;在一行能占满的情况下,是可以实现两端对齐的,但是如果下方的某一行没能占满整行不满一行的元素也会遵循两端对齐,这明显不是期望的效果,所以用到了margin负值的方法。

  如果子元素左浮动和只加margin-left+父元素加一个对应的负的margin-left,此时父元素右侧也会相应左移,此时父元素的宽度设置的固定值1200px。百度了一下找到这句话:

    当元素不存在width或者width:auto的时候,负margin会增加元素的宽度。

  将父元素的宽度设置为auto即可(注意计算好子元素的宽度和外边距的值)

posted @ 2020-05-25 10:24  俄罗斯方块  阅读(339)  评论(0编辑  收藏  举报