我試圖垂直對齊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 回答
吃雞游戲
TA貢獻1829條經驗 獲得超7個贊
display: inline-flex不會使彈性項目內聯顯示。它使Flex容器顯示為內聯。這是display: inline-flex和之間唯一的區別display: flex?？梢栽?code>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使容器的行為類似于內聯元素。
大話西游666
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 關注
- 4271 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消