【CSS】fit-content, min-content, max-content, fill-available 详解与异同

  • 【CSS】fit-content, min-content, max-content, fill-available 详解与异同已关闭评论
  • 32 次浏览
  • A+
所属分类:Web前端
摘要

首先,当 container 设置为这三个值时,不管其他情况如何变化,其宽度始终贴合 inner,即使 inner + container 的宽度超出了 outer 的限制也是如此(超出时,网页的表现由 overflow 属性决定)。三者的不同体现在对 inner 宽度的影响上,下面对此分类讨论。


设定

  • 为了描述方面,我们将以 width 举例
  • 设定三层元素,他们层层嵌套,分别称作:inner, container, outer。如下所示:
    outer
    container

    inner

  • 三层元素都有几种情况:
    • outer
      • 有限制 例如,设置了 width 或 max-width 为固定值
      • 无限制 例如,将 width 设置为根据内容变化的值,且长度可以无限增加
    • container
      fit-content, min-content, max-content, fill-available 四种。其中 fit-content, min-content, max-content 为 width, height 等 CSS 属性的可选值,fill-available 是指 width, height 等为 auto 时的表现。
    • inner
      • 固定宽度 设置了固定的 width
      • 文本 该层为可换行的文本,其宽度可长可短。
      • 随父元素变化 例如 width 为 100%
  • 文中会出现 inner + container < outer 这种类似表达式的表述方式。这里 inner 指其包括 margin 在内的总宽度;container 指其 padding + border + margin 的宽度,不含 width;outer 在有限制时,指其达到限制时 width 的宽度,在无限制时,表示无限大。

fit-content, min-content, max-content

首先,当 container 设置为这三个值时,不管其他情况如何变化,其宽度始终贴合 inner,即使 inner + container 的宽度超出了 outer 的限制也是如此(超出时,网页的表现由 overflow 属性决定)。三者的不同体现在对 inner 宽度的影响上,下面对此分类讨论。

  • inner 为固定宽度 此时三个属性表现完全相同,inner 为其设定宽度
  • inner 随父元素变化 此时三个属性表现完全相同。 inner 为其最小宽度,即:若 min-width 为固定值,则 inner 宽度为该值;否则,inner 宽度为 0
  • inner 为可换行文本
    • min-content inner 为文本最小宽度(尽可能换行)
    • max-content inner 为文本最大宽度(完全不换行)
    • fit-content 在不超出 outer 的情况下,inner 尽可能宽。而如果 inner 为文本最小宽度时也超出了 outer,那 inner 就是文本最小宽度。更明确的表述如下:
      if (文本最大宽度 + container < outer) {   inner = 文本最大宽度 } else if (文本最小宽度 + container > outer) {   inner = 文本最小宽度 } else {   inner = outer - container } 

fill-available

  • outer 为固定宽度 container 贴合 outer 内部,inner 可能超出 container
  • 否则,inner 和 container 的表现与 max-content 相同(此时 fit-content 的表现也与 max-content 相同)