为什么display flex错位

引用中提到，当父元素设置了display:flex时，所有的子标签会默认加上flex:0 1 auto。其中1代表了flex-shrink属性，它表示开启了元素的收缩功能，导致左边的子标签会挤掉右边子标签的一部分。所以，如果希望解决这个问题，可以将该标签的自动收缩关闭，即设置为flex:0 0 auto，然后再设置该标签的宽度。这样可以避免子标签的不正常收缩导致布局问题。

另外，在引用中提到，设置父标签为flexbox布局，并使用flex-direction: column将子元素纵向排列，然后使用align-items:center将其居中。如果想要调整子元素之间的距离，可以设置margin-top或margin-bottom。

总结来说，display:flex无效可能是由于子标签的flex属性设置不当造成的。可以通过关闭子标签的自动收缩功能，或者调整子元素之间的距离来解决这个问题。<span class="em">1</span><span class="em">2</span><span class="em">3</span>