通常，在CSS中，當父級和最后一個子級具有邊距時，這些邊距會折疊以創建單個邊距。例如article { margin-bottom: 20px}main { background: pink; margin-bottom: 20px;}footer { background: skyblue;}<div id="container"> <main> <article> Item 1 </article> <article> Item 2 </article> </main> <footer>Footer</footer></div>如您所見，即使20px在article和main標記上都指定了的邊距，您也只能20px在最后一篇文章和頁腳之間得到一個邊距。但是，當使用flexbox時，我們40px在上一個文章和頁腳之間留有邊距- 20p從文章到main 的全邊距為x，20px從main到footer的邊距為全。#container { display: flex; flex-direction: column;}article { margin-bottom: 20px}main { background: pink; margin-bottom: 20px;}footer { background: skyblue;}<div id="container"> <main> <article> Item 1 </article> <article> Item 2 </article> </main> <footer>Footer</footer></div>有沒有一種方法可以使flexbox的頁邊距行為與非flexbox的頁邊距相同？
2 回答
蕭十郎
TA貢獻1815條經驗 獲得超13個贊
邊距折疊是塊格式化上下文的功能。
在flex格式化上下文中沒有邊際崩潰。
3. Flex容器：flex和inline-flex display 值
一個伸縮容器為其內容建立一個新的伸縮格式上下文。這與建立塊格式化上下文相同，除了使用Flex布局而不是塊布局。例如，浮點數不會侵入flex容器，并且flex容器的邊距不會隨其內容的邊沿收縮。
動漫人物
TA貢獻1815條經驗 獲得超10個贊
注意：這不是使邊距在彈性框布局中的行為與在塊布局中相同的方式。但是，這在某些情況下可能有助于解決保證金問題。
您可以使用偽選擇器來獲得所需的效果，而不必依賴于崩潰的邊距：
main{
display: flex;
flex-direction: column;
margin-bottom: 20px;
}
article{
margin-bottom: 20px;
background: #eee;
}
article:last-child{
margin-bottom: 0;
}
footer{
background: #eef;
}
<main>
<article>
This is article number 1
</article>
<article>
This is article number 2
</article>
<article>
This is article number 3
</article>
</main>
<footer>
This is the footer of the page
</footer>
- 2 回答
- 0 關注
- 655 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消