显示之间的区别:内联-灵活和显示:FLEX

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (12)

我很难理解这个财产display:inline-flex;,之间的区别是什么?display:inline-flex;display:flex;?

我试图垂直对齐ID包装中的一些元素。所以我才把财产display:inline-flex;因为ID包装器是Flex容器。

#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-flexdisplay: flex类似的比较可以在display: inline-blockdisplay: block

对FLEX项目的影响是绝对没有区别的;无论Flex容器是块级还是内联级,Flex布局都是相同的。特别是,Flex项本身的行为总是像块级的框(尽管它们确实有。一些内联块的属性)。不能内联显示FLEX项;否则实际上没有FLEX布局。你所说的“垂直对齐”到底是什么意思,也不清楚你为什么要内联地显示内容,但我怀疑柔性盒不是你想要完成的东西的正确工具。

用户回答回答于

flexinline-flex两者都将FLEX布局应用于容器的子容器。容器display:flex行为类似于块级元素本身,而display:inline-flex使容器的行为类似内联元素。

扫码关注云+社区