嵌套flex容器时正确使用flex属性

flex容器始终是父级,而flex项目始终是子级,因为flex格式上下文的范围限于父/子关系。

Flex容器的后代(超出子代)不是Flex布局的一部分,并且不接受flex属性。

您需要始终使用-

display: flex

要么

display: inline-flex

一些flex属性仅适用于flex容器-

justify-content
flex-wrap
flex-direction

一些仅适用于弹性项目的弹性属性-

align-self
flex-grow
flex