flex:1 和 flex:auto 的区别

flex:1和flex:auto是CSS3中Flexbox布局模式中两种不同的属性。其中，flex:1是指元素在Flex容器中会自动填充可用空间，占据剩余的所有空间，而flex:auto则是指元素会根据内容自动调整自身大小，不会主动占据剩余空间。

具体来说，flex:1会将剩余空间均分给Flex容器中的每个元素，这个均分的比例是根据每个元素的flex-grow属性来分配的。而flex:auto则会根据元素自身内容的大小来调整元素的大小，不会主动占据剩余空间。

举个例子，如果一个Flex容器中有两个子元素，第一个子元素设置为flex:1，第二个子元素设置为flex:auto。那么第一个子元素会占据剩余的所有空间，并且根据其flex-grow属性的值来分配这些空间；而第二个子元素则会根据其自身内容的大小来调整自己的大小，不会主动占据剩余空间。