css – display:inline-flex和display:flex之间的区别

前端之家收集整理的这篇文章主要介绍了css – display:inline-flex和display:flex之间的区别前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有困难理解属性显示:inline-flex ;.
display:inline-flex之间有什么区别?和显示:flex ;?

我试图垂直对齐ID包装器中的一些元素。这就是为什么我给属性显示:inline-flex;到此ID;因为ID包装器是flex容器。

但是介绍没有区别。我预计包装器ID中的所有内容都将以内联方式显示

#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>

JSFiddle Example

有什么不同?

解决方法

display:inline-flex不会使弹性项目显示为内联。它使得flex容器显示为内联。这是display:inline-flex和display:flex之间的唯一区别。可以在display:inline-block和display:block和 pretty much any other display type that has an inline counterpart之间进行类似的比较。

对弹性项目的影响绝对没有区别; flex布局是相同的,不管flex容器是块级还是行内级。特别地,flex项本身总是表现为块级框(虽然它们具有一些inline-blocks的属性)。您不能内联显示flex项目;否则你实际上没有flex布局。不清楚“垂直对齐”是什么意思,或者为什么要直接显示内容,但我怀疑flexBox不是你想要完成的任何正确的工具。

猜你在找的CSS相关文章