flex布局设置justify-content为space-between,最后一个元素无法右对齐

给flex盒子设置justify-content:space-between,双行排列时出现最后一个元素无法右侧对齐的情况,如下图所示。


space-between最后一个元素无法右对齐.jpg

可以看到item4和item2在右侧没有对齐,代码如下:




    
    Document
    


    
  • 1
  • 2
  • 3
  • 4

有两种解决方法:

  1. 将.item的margin-left或者margin-right或两者同时设置为auto,这个方法部分情况下左右会出现margin值,不能真正两端撑到flex盒子边缘,如下图1;
  2. 另一种方法是去掉.clearfix用于清除浮动的:after伪元素,即可实现最终想要的效果,如下图2.


    flex子元素左右两端出现margin.jpg

    space-between两端对齐.jpg

原文链接:http://www.web315.net/doc/49.html

你可能感兴趣的:(flex布局设置justify-content为space-between,最后一个元素无法右对齐)