弹性基础和宽度之间有什么区别?

有关于这方面的问题和文章,但据我所知,没有任何结论。 我能find的最好的总结是

flex-basis允许您在计算任何其他内容之前指定元素的初始/开始大小。 它可以是百分比或绝对值。

…这本身并没有太多的关于柔性基础设置元素的行为。 用我目前对flexbox的知识,我不明白为什么不能描述宽度

我想知道如何在实践中完全不同于宽度的 flex-basis

  • 如果我用flex来代替宽度 (反之亦然),那么视觉上会有什么变化呢?
  • 如果我同时设置不同的值,会发生什么? 如果他们有相同的价值会发生什么?
  • 是否有一些特殊的情况下使用宽度弹性基础会有显着的差异,使用另一个?
  • 在与其他Flexbox风格(例如flex-wrapflex-growflex-shrink)结合使用时, 宽度flex基础有何不同?
  • 任何其他重大差异?

编辑/澄清 :这个问题已经被问到一个不同的格式什么完全弹性基础属性集? 但是我觉得对flex-basiswidth (或者height )差异的更直接的比较或者总结会更好。

考虑flex-direction

在阅读你的问题时首先想到的是flex-basis并不总是适用于width

flex-directionrowflex-basis控制宽度。

但是,当flex-directioncolumnflex-basis控制高度。


主要差异

以下是flex-basiswidth / height之间的一些重要区别:

  • flex-basis只适用于弹性项目。 Flex容器(也不是Flex项目)将忽略flex-basis Flex的容器,但可以使用widthheight

  • flex-basis仅适用于主轴。 例如,如果您在flex-direction: column ,则width属性将用于水平调整Flex项目的大小。

  • flex-basis对绝对定位的flex项目没有影响。 widthheight属性将是必要的。 绝对定位的柔性项目不参与柔性布局 。

  • 通过使用flex属性, flex-growflex-shrinkflex-basis三个属性可以整齐地组合到一个声明中。 使用width ,相同的规则将需要多行代码。


浏览器行为

就呈现方式而言, flex-basiswidth之间应该没有区别 ,除非flex-basisautocontent

从规格:

7.2.3。 基于flex-basis属性

对于autocontent以外的所有值, flex-basis的解决方法与在水平书写模式下的width相同。

但是autocontent的影响可能是微乎其微的,或根本就没有。 更多来自规格:

auto

在Flex项目上指定时, auto关键字将检索main size属性的值作为使用的flex-basis 。 如果该值本身是auto ,则使用的值是content

content

根据Flex项目的内容指示自动resize。

注意:这个值在Flexible Box Layout的初始版本中是不存在的,因此一些较老的实现将不支持它。 通过使用autoauto的主要尺寸( widthheight )一起使用可以实现相当的效果。

因此,根据规范, flex-basiswidth解决方法是一致的,除非flex-basisautocontent 。 在这种情况下, flex-basis可能会使用内容宽度(据推测width属性也会使用)。


flex-shrink因子

记住flex容器的初始设置很重要。 其中一些设置包括:

  • flex-direction: row – flex项目将水平alignment
  • justify-content: flex-start – flex项目将堆叠在主轴线上的起始位置
  • align-items: stretch – flex项目将展开以覆盖容器的交叉大小
  • flex-wrap: nowrap – flex项目被强制保留在一行中
  • flex-shrink: 1 – 允许Flex项目缩小

注意最后的设置。

因为flex项目被允许默认收缩(防止它们溢出容器),所以可以覆盖指定的flex-basis / width / height

例如, flex-basis: 100pxwidth: 100px ,再加上flex-shrink: 1 ,不一定是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 */ 

7.2。 灵活性的组成部分

鼓励作者直接使用flex速记而不是直接使用它的速记属性来控制灵活性,因为速记可以正确地重置任何未指定的组件以适应常见的用途 。


浏览器错误

影响所有主stream浏览器的错误,除了IE 11和Edge:

在嵌套的柔性容器中忽略flex-basiswidth作品。

在嵌套柔性容器中调整柔性项目大小时发现问题。

当使用flex-basis ,容器会忽略孩子的尺寸,孩子们会溢出容器。 但是对于width属性,容器尊重其子项的大小并相应地扩展。 这在IE11和Edge中不是问题。

参考文献:

  • 根据儿童的内容,Chrome不扩展灵活父项
  • 宽度和弹性基础之间的区别
  • 在对嵌套的柔性容器进行尺寸调整时,Flex基础将被忽略。
  • flex-basis:100px做一些不同于宽度:100px + flex-basis:auto

例子:

使用flex-basiswhite-space: nowrap来flex项目white-space: nowrap溢出inline-flex容器。 width作品。

看起来,设置为inline-flex的flex容器在使用white-space: nowrap渲染兄弟节点时不会识别flex-basis white-space: nowrap (尽pipe它可能只是未定义宽度的项目)。 容器不会扩大以容纳物品。

但是,当使用width属性而不是flex-basis ,容器将尊重其子项的大小并相应地展开。 这在IE11和Edge中不是问题。

参考文献:

  • 内联柔性容器宽度不增长
  • 内联柔性容器(display:inline-flex)正在扩展父容器的整个宽度

例:


影响IE 10和11的错误:

  • 以无单位flex-basis值的flex速记声明被忽略
  • flex-basis不考虑box-sizing: border-box
  • flex-basis不支持calc()
  • 在使用flex速记时,重要性在flex-basis被忽略

除了Michael_B的精彩总结之外,值得重申一下:

flex-basis允许您在计算任何其他内容之前指定元素的初始/开始大小。 它可以是百分比或绝对值。

这里的重要部分是最初的

就其本身而言,这确实解决了宽度/高度, 直到其他柔性增长/收缩属性发挥作用。

所以。 一个小孩

 .child { flex-basis:25%; flex-grow:1; } 

将最初的宽度为25%,但是会立即扩大,直到其他元素被计入。如果没有,那么将是100%宽/高。

快速演示:

 .flex { width: 80%; margin: 1em auto; height: 25px; display: flex; background: rebeccapurple; } .child { flex-basis: auto; /* default */ background: plum; } .value { flex-basis: 25%; } .grow { flex-grow: 1; } 
 <div class="flex"> <div class="child auto">Some Content</div> </div> <div class="flex"> <div class="child value">Some Content</div> </div> <div class="flex"> <div class="child grow">Some Content</div> </div> 

可能是最重要的一点补充:

如果浏览器不支持flex呢? 在这种情况下, width/height接pipe并且它们的值适用。

定义元素的width/height是一个非常好的主意 – 几乎是必不可less的 – 即使您对flex-basis有完全不同的值。 请记住通过禁用display:flex进行testingdisplay:flex并查看所获得的结果。