关于flex两端对齐的问题

flex两端对齐是一个非常容易的写法。

 display: flex;
  flex-direction: row;
  justify-content: space-between;

但是今天使用，怎么都不好用。总是紧挨着出现在一起。

最后发现是因为其父元素不够宽造成的。父元素原来我设置的内容比较长，所以内容自动撑大了，不需要设置宽度。当内容变少的时候，宽度自动收缩，导致这个元素的宽度不够。虽然也是两端对齐，但是因为宽度不够，还是挤在一起了。

 

解决方案：将父元素设置宽度为100%即可，记住不是本元素，是父元素。