html - flex-basis : auto and flex-basis: content? 之间有什么区别

标签 html css flexbox

我一直在阅读MDN articleflex-basis css 属性。在那里我没有看到 flex-basis: auto 的任何定义.它解释了flex-basis: content .好像content现已更换auto .但如果是这样,那为什么是 auto还是初始值?

最佳答案

MDN article自从最初提出这个问题以来,似乎已经更新。简而言之:

  • auto意思是“看看我的宽度或高度属性”。
  • content意思是“看看我的内容”。

  • 当元素具有固定的 width 时,这确实会导致细微的差异。或 height .如果您查看此 live demo,您会注意到这种差异仅在 Firefox 中(在撰写本文时,值 contentONLY supported in Firefox)。
    还要引用同一 MDN 文章中的历史注释:
    • Originally, flex-basis:auto meant "look at my width or height property".
    • Then, flex-basis:auto was changed to mean automatic sizing, and "main-size" was introduced as the "look at my width or height property" keyword. It was implemented in bug 1032922.
    • Then, that change was reverted in bug 1093316, so auto once again means "look at my width or height property"; and a new content keyword is being introduced to trigger automatic sizing. (bug 1105111 covers adding that keyword).

    关于html - flex-basis : auto and flex-basis: content? 之间有什么区别,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45038372/

    相关文章:

    html - 使用 flexbox 拉伸(stretch)内容以扩展到整个视口(viewport)

    javascript - <表单提交 ="function();"> 不工作

    javascript - 似乎无法将已翻译 270 度的文本水平居中?

    html - 为什么富内容中的 HTML 文本将图像显示为 'Graphic'?

    css - 使用 flex-basis 时 Flex 元素溢出

    android - React Native ellipsizeMode - 2 个文本在同一行

    jquery - 设置水平滚动条固定位置在显示屏底部

    html - 无法从信息窗口中删除白色边框

    css - 使底部边框更靠近文本

    html - 亚马逊 S3 上的缓存问题