为了账号安全,请及时绑定邮箱和手机立即绑定

display:inline-flex和display:flex之间有什么区别?

/ 猿问

display:inline-flex和display:flex之间有什么区别?

MMTTMM 2019-09-19 15:20:20

我试图垂直对齐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>


查看完整描述

3 回答

?
吃鸡游戏

display: inline-flex不会使弹性项目内联显示。它使Flex容器显示为内联。这是display: inline-flex和之间唯一的区别display: flex。可以在display: inline-block和之间进行类似的比较display: block,并且几乎任何其他具有内联对应的显示类型。1

对柔性物品的影响绝对没有区别; 无论Flex容器是块级还是内联级,flex布局都是相同的。特别是,flex项本身总是表现得像块级框(尽管它们确实具有内联块的一些属性)。您无法内联显示弹性项目; 否则你实际上没有flex布局。

目前尚不清楚“垂直对齐”究竟是什么意思,或者为什么你想要内联显示内容,但我怀疑flexbox不是你想要完成的任何工具。您正在寻找的机会只是简单的旧内联布局(display: inline和/或display: inline-block),Flexbox 不是替代品; flexbox 不是每个人都声称的通用布局解决方案(我说这是因为误解可能就是为什么你首先考虑使用flexbox)。


块布局和内联布局之间的差异超出了这个问题的范围,但最突出的是自动宽度:块级框水平拉伸以填充其包含块,而内联级框缩小以适应它们的内容。事实上,仅仅因为这个原因你几乎不会使用,display: inline-flex除非你有充分的理由在内联显示你的flex容器。


查看完整回答
反对 回复 2019-09-19
?
慕慕0277861

flex并且inline-flex都将flex布局应用于容器的子项。容器的display:flex行为类似于块级元素本身,同时display:inline-flex使容器的行为类似于内联元素。


查看完整回答
反对 回复 2019-09-19
?
大话西游666

好吧,我知道起初可能有点混乱,但是display在谈论父元素,所以当我们说:display: flex;这是关于元素,当我们说display:inline-flex;,也是在制作元素本身inline......


这就像制作div 内联或块,运行下面的代码片段,你可以看到如何display flex分解到下一行:


.inline-flex {

  display: inline-flex;

}


.flex {

  display: flex;

}


p {

  color: red;

}

<body>

  <p>Display Inline Flex</p>

  <div class="inline-flex">

    <header>header</header>

    <nav>nav</nav>

    <aside>aside</aside>

    <main>main</main>

    <footer>footer</footer>

  </div>


  <div class="inline-flex">

    <header>header</header>

    <nav>nav</nav>

    <aside>aside</aside>

    <main>main</main>

    <footer>footer</footer>

  </div>


  <p>Display Flex</p>

  <div class="flex">

    <header>header</header>

    <nav>nav</nav>

    <aside>aside</aside>

    <main>main</main>

    <footer>footer</footer>

  </div>


  <div class="flex">

    <header>header</header>

    <nav>nav</nav>

    <aside>aside</aside>

    <main>main</main>

    <footer>footer</footer>

  </div>

</body>


查看完整回答
反对 回复 2019-09-19

添加回答

回复

举报

0/150
提交
取消
意见反馈 邀请有奖 帮助中心 APP下载
官方微信