我最近开始使用flexbox,经常会遇到需要在主轴之间分配空间的情况。
我经常在width
和之间犹豫flex-grow
。例如,如果我要一项测量2个量度,而另一项测量100%,则我有两个选择。我可以设置width: 66.6%
和width: 33.3%
,或flex-grow: 2
和flex-grow: 1
。
有时,如果我希望一个元素扩大其余空间,我可以这样做width: 100%
或flex-grow: 1
。
我该如何选择?使用width与flex-grow有什么区别/注意事项?
width
和flex-grow
是两个完全不同的CSS特性。
该width
属性用于定义元素的宽度。
该flex-grow
属性用于在flex容器中分配可用空间。像该属性一样,此属性未将特定长度应用于元素width
。它只是允许弹性项目消耗任何可用空间。
有时,如果我希望一个元素扩大其余空间,我可以这样做
width: 100%
或flex-grow: 1
。我该如何选择?
是的,如果是行中的一个元素,width: 100%
并且flex-grow: 1
可能有同样的效果(视padding
,border
并box- sizing
设置)。
但是,如果有两个元素,而您想让第二个元素占用剩余空间呢?容器中有兄弟姐妹时,width: 100%
会导致溢出。我想你可以做这样的事情:
width: calc(100% - width of sibling);
但是,如果同级的宽度是动态的或未知的怎么办?calc
不再是一种选择。
快速简便的解决方案是flex-grow: 1
。
虽然width
和flex-grow
是苹果与桔子,width
和flex-basis
是苹果对苹果。
该flex-basis
属性设置弹性项目的初始主要尺寸,类似于width
。
问题内容: 关于此有很多问题和文章,但据我所知,尚无定论。我能找到的最好的总结是 flex-basis 允许您在计算其他任何内容之前指定元素的初始/开始大小。它可以是百分比或绝对值。 …本身并没有过多说明具有 flex-basis 设置的元素的行为。以我目前对flexbox的了解,我不明白为什么那也不能描述 宽度 。 我想知道 flex-basis 与实际 宽度 有何不同: 如果我用 flex-b
问题内容: 在mdn 与…相同 。 但是,实际上它在浏览器中有不同的显示。 您可以通过更改CSS中的注释在jsFiddle中进行尝试。 当我使用元素时,其类名将是,但使用时不会发生。 我不明白为什么。寻求帮助。非常感谢。 问题答案: 该 属性是设置的简写: 该规则应对此进行计算: 这些值在规范中定义。参见7.1.1节。的基本价值 我之所以说 “应该计算” ,是因为在IE11和可能的其他浏览器中,度
本文向大家介绍请说说width: auto和width: 100%有什么区别?相关面试题,主要包含被问及请说说width: auto和width: 100%有什么区别?时的应答技巧和注意事项,需要的朋友参考一下 width:auto 是自适应宽度 减去 magrin 边框 等间距,剩余的宽度,width:100% 是占据父元素的 100% 宽度
问题内容: 我正在尝试在ID包装器中垂直对齐元素。我将属性赋予此ID,因为ID包装器是flex容器。 但是呈现方式没有什么区别。我希望包装ID中的所有内容都会显示出来。为什么不呢 问题答案: 不会使 弹性项目 内联显示。它使 伸缩容器 内联显示。这是和之间的唯一区别。可以在和之间以及与具有内联对应项的几乎所有其他显示类型之间进行类似的比较。1个 弹性项目的效果绝对没有区别;无论flex容器是块级还
本文向大家介绍flex:1与flex:auto有什么区别?相关面试题,主要包含被问及flex:1与flex:auto有什么区别?时的应答技巧和注意事项,需要的朋友参考一下
问题内容: 可以在这里找到代码: 我发现有内标记,也有内标签。它们都是必需的吗?(在这种情况下,CSS似乎覆盖了HTML属性)关于它们之间的区别是否有任何解释? 问题答案: 我检查了文档,但是它们并不清楚如果同时设置了它们。 那藏在这里的某个地方: UA可以选择使用HTML源文档中的表示属性。如果是这样,则将这些属性转换为对应的CSS规则,其特异性等于0,并且将其视为在作者样式表的开头插入。因此,