[英]Browser saying that flex-basis: content is “Invalid property value”
Given: 鉴于:
.layout { display: flex; flex-wrap: nowrap; align-items: stretch; } .layout aside, .layout main { min-width: 100px; } .layout aside { flex: 0 0 content; background-color: red; } .layout main { flex: 1 1 content; background-color: green; }
<div class="layout"> <aside> <p>Line 1</p> </aside> <main> <p>Line 1</p> <p>Line 2</p> <p>Line 3</p> </main> </div>
My intentions are: 我的意图是:
but if I run that code and inspect it with Chrome I get the following error on both flex:
statements: 但是,如果我运行该代码并使用Chrome对其进行检查,则在两个
flex:
语句上都会收到以下错误:
Invalid property value
无效的属性值
and moreover the green box doesn't expand on the right as it should. 而且,绿色框不会在右侧扩展。 My Chrome version is 56.0.2924.87 (64-bit) on Mac OS X 10.11.5.
在Mac OS X 10.11.5上,我的Chrome版本是56.0.2924.87(64位)。
What am I doing wrong? 我究竟做错了什么?
flex-basis: content
is a valid rule, but it's not supported by all browsers yet. flex-basis: content
是有效的规则,但尚不被所有浏览器支持。
From the spec: 从规格:
Note: This value was not present in the initial release of Flexible Box Layout, and thus some older implementations will not support it.
注意:此值在“ Flexible Box Layout”的初始发行版中不存在,因此某些较早的实现不支持该值。 The equivalent effect can be achieved by using
auto
together with a main size (width
orheight
) ofauto
.等同的效果可以通过使用能够实现
auto
与主尺寸(一起width
或height
的)auto
。
Also see MDN for a brief history of the content
value: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis#Values 另请参阅MDN以获取
content
值的简要历史记录: https : //developer.mozilla.org/en-US/docs/Web/CSS/flex-basis#Values
Use flex: 1 1 auto
instead. 使用
flex: 1 1 auto
。
It's the shorthand for flex-grow
, flex-shrink
, and flex-basis
, in that order. 按顺序是
flex-grow
, flex-shrink
和flex-basis
的简写。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.