我在行为之间遇到了差异,width而且flex-basis我无法解释它与flex-basis和width之间有什么区别?.
.outer {
display: flex;
background: yellow;
padding: 10px;
}
.middle {
display: flex;
flex-shrink: 0;
background: red;
padding: 10px;
}
.inner {
flex-basis: 258px;
flex-shrink: 0;
display: flex;
flex-grow: 0;
background: green;
}
.inner2 {
width: 258px;
flex-shrink: 0;
display: flex;
flex-grow: 0;
background: green;
}Run Code Online (Sandbox Code Playgroud)
<div class="outer">
<div class="middle">
<div class="inner">
hello
</div>
</div>
</div>
<div class="outer">
<div class="middle">
<div class="inner2">
hello
</div>
</div>
</div>Run Code Online (Sandbox Code Playgroud)
这是一个说明我遇到的问题的例子.我期望两行看起来都一样,但是,当使用flex-basis(第1行)时,flex容器(.middle元素)似乎忽略了它的子.inner …