3 回答
TA贡献1829条经验 获得超7个赞
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)。
1 块布局和内联布局之间的差异超出了这个问题的范围,但最突出的是自动宽度:块级框水平拉伸以填充其包含块,而内联级框缩小以适应它们的内容。事实上,仅仅因为这个原因你几乎不会使用,display: inline-flex
除非你有充分的理由在内联显示你的flex容器。
TA贡献1757条经验 获得超7个赞
flex
并且inline-flex
都将flex布局应用于容器的子项。容器的display:flex
行为类似于块级元素本身,同时display:inline-flex
使容器的行为类似于内联元素。
TA贡献1817条经验 获得超14个赞
好吧,我知道起初可能有点混乱,但是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>
- 3 回答
- 0 关注
- 4182 浏览
相关问题推荐
添加回答
举报