- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
关于这一点,有很多问题和文章,但据我所知,没有什么结论。我能找到的最好的总结是
flex basis允许您在计算任何其他元素之前指定元素的初始/起始大小。它可以是百分比,也可以是绝对值。
…这本身并没有说明使用flex基集的元素的行为。以我目前对flexbox的了解,我不明白为什么不能同时描述宽度。
我想知道在实践中弹性基础和宽度到底有什么不同:
如果我将宽度替换为弹性基础(反之亦然),视觉上会有什么变化?
如果我将两者设置为不同的值,会发生什么情况?如果它们有相同的价值会发生什么?
在某些特殊情况下,使用宽度或弹性基础与使用其他基础有显著差异吗?
当与其他flexbox样式(如flex wrap、flex grow和flex shrink)结合使用时,宽度和flex basis有何不同?
还有其他显著差异吗?
编辑/澄清:这个问题在What exactly flex-basis property sets?中以不同的格式提出,但我觉得更直接地比较或总结弹性基础和宽度(或高度)的差异会更好。
最佳答案
考虑flex-direction
阅读问题时首先想到的是flex-basis
并不总是适用于width
。
当flex-direction
为row
时,flex-basis
控制宽度。
但当flex-direction
是column
时,flex-basis
控制高度。
主要区别
以下是flex-basis
和width
/height
之间的一些重要区别:flex-basis
仅适用于弹性项。Flex容器(也不是Flex项)将忽略flex-basis
,但可以使用width
和height
。flex-basis
只在主轴上工作。例如,如果您在flex-direction: column
中,则需要width
属性来水平调整flex项的大小。flex-basis
对绝对定位的弹性项目没有影响。width
和height
属性是必需的。Absolutely-positioned flex items do not participate in flex layout。
通过使用flex
属性,可以将flex-grow
、flex-shrink
和flex-basis
三个属性巧妙地组合成一个声明。使用width
,同一规则将需要多行代码。
浏览器行为
就渲染方式而言,flex-basis
和width
之间应该没有区别,除非flex-basis
是auto
或content
。
从规范:
7.2.3. The flex-basis
property
对于除auto
和content
之外的所有值,flex-basis
的解析方式与水平写入模式中的width
相同。
但是auto
或content
的影响可能很小,或者根本没有影响。规范中的更多内容:auto
在flex项上指定时,auto
关键字将检索该值
的主大小属性。如果这个值是
本身flex-basis
,则使用的值为auto
。content
表示根据flex项的内容自动调整大小。
注意:此值不存在于最初的柔性版本中。
Box布局,因此一些较旧的实现将不支持它。
将content
与auto
的主要大小(width
或height
)。
因此,根据规范,auto
和flex-basis
的解析是相同的,除非width
是flex-basis
或auto
。在这种情况下,content
可能会使用内容宽度(也可能会使用flex-basis
属性)。width
因子
记住flex容器的初始设置很重要。其中一些设置包括:flex-shrink
-弹性项将水平对齐flex-direction: row
> Flex项将在主轴上的行开始堆栈。justify-content: flex-start
-柔性项目将扩展以覆盖容器的交叉尺寸align-items: stretch
-弹性项被迫保持在一行中flex-wrap: nowrap
-允许弹性项收缩
注意最后的设置。
由于默认情况下允许flex项收缩(这可以防止它们溢出容器),因此可以覆盖指定的flex-shrink: 1
/flex-basis
/width
。
例如,height
或flex-basis: 100px
加上width: 100px
,不一定是100px。
要渲染指定的宽度并保持其固定,需要禁用收缩:
div {
width: 100px;
flex-shrink: 0;
}
div {
flex-basis: 100px;
flex-shrink: 0;
}
flex: 0 0 100px; /* don't grow, don't shrink, stay fixed at 100px */
flex-shrink: 1
速记来控制灵活性。
flex
在嵌套的flex容器中被忽略。
flex-basis
有效。
width
时,容器忽略其子级的大小,子级会溢出容器。但使用
flex-basis
属性时,容器会尊重其子级的大小并相应地扩展。
width
和
flex-basis
溢出
white-space: nowrap
容器调整项目。
inline-flex
有效。
width
的flex容器在呈现具有
inline-flex
的同级对象时似乎无法识别子对象上的
flex-basis
(尽管它可能只是宽度未定义的项)。容器无法扩展以容纳项目。
white-space: nowrap
属性而不是
width
时,容器会尊重其子级的大小并相应地扩展。这在IE11和Edge中不是问题。
flex-basis
(和
flex-basis
)不处理表元素
flex-grow
shorthand declarations with unitless flex
values are ignored
flex-basis
doesn't account for flex-basis
box-sizing: border-box
doesn't support flex-basis
calc()
when using flex-basis
shorthand
关于css - flex-basis和width有什么区别?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39949667/
更新 对于那些不喜欢内联 CSS 并想要类的人,这里有另一个带有类和样式表的 jsFiddle。 更新结束 我想做一个产品页面。它将包含三列。第一个是图片,第二个是一些规范,第三个是“入篮”。所有列的
我创建了一个简单的测试应用程序 使用以下代码 var i : int; for (i=0; i *
我做了一个小demo http://html5.by/blogdemo/flexbox/flex-grow-shrink-basis-stackoverflow.html flex 容器中有2个 fl
我读过好几遍,要让 flex-grow 按预期工作,您通常需要设置 flex-grow:1(或 flex: 1) 在元素的父级、其父级等上,一直向上。 在学习 flexbox 时,这给我的印象是它具有
我开始学习 FLEX。我只有 flex sdk。所以我只能使用它开始学习吗?如果是这样,请建议我要通过的链接.. 但是,使用编辑器将最大限度地减少我们的工作,并自行创建代码。所以作为一个新的学习者,理
有没有办法使用 flex-direction: column 在 flex 容器中放置 flex 项有相同的高度,只使用 CSS? JSFiddle:https://jsf
我有一个 flex .swf 和一个单独的 AIR 项目,我试图通过套接字相互通信。 这两个程序连接正常,.swf 能够毫无问题地将数据发送到 AIR 应用程序。但是,我发现当 AIR 应用程序将数据
在这种情况下,我希望将 2.5 放置在 2 下方 - 但 flexbox 容器强制将其放置在同一行,而不是将其放置在 div 下方那已经是那个特定的顺序了。 我如何使用 flexbox - 将包含 2
假设您有一个带有显示 flex、flex-direction 列的 div,在本例中高度为 600。 它有三个子项,每个子项的属性 flex 等于 1。前两个子项呈现一些简单文本,第三个子项呈现 h1
男孩,这个头衔是满口的。让我解释一下我的困惑: 我有一个 flex 容器和 2 个 flex 元素。 /* CSS */ .container {
这个问题在这里已经有了答案: CSS3 Flexbox: display: box vs. flexbox vs. flex (3 个答案) 关闭 1 年前。 今天我们中的许多人都知道 displa
其用例是带有单选按钮的响应式表单。当在大 PC 屏幕上时,所有单选按钮通常都在屏幕上的一行中(就像带有 flex-direction: row 的非包装 flex 容器中的 flex 元素)。在电话上
在可访问的 flex 应用程序中,用户可以使用 TAB 键在控件中导航。 在用户激活特定链接后,flex 应用程序会在 html 页面顶部弹出,并使用 swfobject.embedSWF 加载。 它
我将我的 Flex 3 项目导入 Flex 4 并删除了 Flex 4 问题窗口中列出的所有错误和警告。 启动我的应用程序时,我在 Flex 4 中遇到以下错误。 这可能是什么原因? Error: C
我有如下标记: alot of text 我不能让黄色占据红色的 100% 高度,即使红色溢出,它也只占据窗口的 100%。如果我将红色的 display
我在 Eclispe 3.4 中安装了 flex builder 3 插件。现在许可证过期了。所以我需要在其中添加另一个许可证。但我无法更改许可证 key ,因为该选项已禁用。 因此,请任何人知道如何
这个问题在这里已经有了答案: Make flex items have equal width in a row (3 个答案) How to make Flexbox items the same
我正在尝试理解以下行。 flex :0 1 50% 现在,如果最后一个值,flex basis 是像素,上面会说该元素不允许增长,但允许缩小并且最大为 50 像素。 但是用百分比代替,有什么关系。它将
我一直致力于 flex 布局,遇到了针对 Firefox 和 IE11 的问题。 我创建了一个 codepen显示问题。 截图 Chrome(左)、Firefox(右) 描述 预期的行为是header
我正在尝试在 flex (flash builder 4) 中创建一个简单的表单。我在里面放了一个表单容器和 FormItems。例如,表单项是标准的“客户”字段,例如名字、姓氏、地址、城市、州、 z
我是一名优秀的程序员,十分优秀!