display：inline-flex和display：flex有什么区别？

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在尝试在ID包装器中垂直对齐元素。我将属性display:inline-flex;赋予此ID，因为ID包装器是flex容器。

但是呈现方式没有什么区别。我希望包装ID中的所有内容都会显示出来inline。为什么不呢

#wrapper {
    display: inline-flex;
    /*no difference to display:flex; */
}
<body>
    <div id="wrapper">
        <header>header</header>
        <nav>nav</nav>
        <aside>aside</aside>
        <main>main</main>
        <footer>footer</footer>
    </div>
</body>

回答：

display: inline-flex不会使 弹性项目 内联显示。它使 伸缩容器 内联显示。这是display: inline-

flex和之间的唯一区别display: flex。可以在display: inline-block和之间以及display:

block与具有内联对应项的几乎所有其他显示类型之间进行类似的比较。1个

弹性项目的效果绝对没有区别；无论flex容器是块级还是内联级，flex布局都是相同的。特别是，flex项本身始终像块级框一样运行（尽管它们确实具有内联块的

某些 属性）。您不能内联显示弹性项目；否则，您实际上没有弹性布局。

目前尚不清楚“垂直对齐”到底是什么意思，或者为什么要真正内联显示内容，但我不确定flexbox不是您要完成的任务的正确工具。机会是你要找的是什么，只是普通的老直列布局（display:inline和/或display: inline-block），为此，Flexbox将是 不 更换; flexbox_并不是_所有人都声称的通用布局解决方案（我之所以这样说是因为误解可能是您首先考虑使用flexbox的原因）。

1

块布局和内联布局之间的差异不在此问题的范围内，但最突出的是自动宽度：块级框水平拉伸以填充其包含的块，而内联级框缩小以适合其容纳的块内容。实际上，仅出于这个原因，display:inline-flex除非您有很好的理由内联显示flex容器，否则您几乎不会使用。

以上是 display：inline-flex和display：flex有什么区别？ 的全部内容， 来源链接： utcz.com/qa/420352.html

回到顶部