为什么子元素的flex-basis如果有flex-flow则垂直应用：row nowrap？

Question

我有一个带有.primary类和flex-flow: column nowrap;的父元素flex-flow: column nowrap; 增长全宽;

然后我设置了一个带有.aaa类的子元素，它应用了一个flex-flow: row nowrap; 并将增长设置为0，缩小为1，并将基础设置为10rem ;

但是虽然它有flex-flow: row nowrap; flex-basis应用于y-axis而不是x-axis 。 为什么？

 .primary { display: flex; flex-flow: column nowrap; flex: 1 1 auto; background: green; } .aaa { display: flex; flex-flow: row nowrap; flex: 0 1 10rem; background: red; } 

 <div class="primary"> <div class="aaa"> <article> article </article> <aside> aside </aside> </div> </div> 

Answer 1

flex属性适用于Flex容器的子级。

所以在这条规则中：

.primary {
    display: flex;
    flex-flow: column nowrap;
    flex: 1 1 auto;
    background: green;
}

... flex属性什么都不做。 父（ body ）不是flex容器。

在这条规则中：

.aaa {
    display: flex;
    flex-flow: row nowrap;
    flex: 0 1 12rem;
    background: red;
}

... .aaa是.primary的子.primary ，它是一个列方向的flex容器。 因此， flex属性沿Y轴工作。