關(guān)于flex 上下文中自動 margin的問題(完整例子)
為了引出本文的主題,先看看這個問題,最快水平垂直居中一個元素的方法是什么?
水平垂直居中也算是 CSS 領(lǐng)域最為常見的一個問題了,不同場景下的方法也各不相同,各有優(yōu)劣。嗯,下面這種應(yīng)該算是最便捷的了:
<div class="g-container">
<div class="g-box"></div>
</div>
.g-container {
display: flex;
}
.g-box {
margin: auto;
}
上面的display: flex替換成display: inline-flex | grid | inline-grid也是可以的。
CodePen Demo -- 使用 margin auto 水平垂直居中元素
如何讓margin: auto在垂直方向上居中元素
嗯。這里其實就涉及了一個問題,如何讓margin: auto在垂直方向上生效?
換句話說,傳統(tǒng)的display: blockBFC(塊格式化上下文)下,為什么margin: auto在水平方向可以居中元素在垂直方向卻不行?
通常我們會使用這段代碼:
div {
width: 200px;
height: 200px;
margin: 0 auto;
}
讓元素相對父元素水平居中。但是如果我們想讓元素相對父元素垂直居中的話,使用margin: auto 0是不生效的。
BFC 下margin: auto垂直方向無法居中元素的原因
查看 CSS 文檔,原因如下,在 BFC 下:
If both margin-left and margin-right are auto, their used values are equal, causing horizontal centring.
—CSS2 Visual formatting model details: 10.3.3
If margin-top, or margin-bottom are auto, their used value is 0.
—CSS2 Visual formatting model details: 10.6.3
簡單翻譯下,在塊格式化上下文中,如果margin-left和margin-right都是 auto,則它們的表達值相等,從而導(dǎo)致元素的水平居中。( 這里的計算值為元素剩余可用剩余空間的一半)
而如果margin-top和margin-bottom都是 auto,則他們的值都為 0,當(dāng)然也就無法造成垂直方向上的居中。
使用 FFC/GFC 使margin: auto在垂直方向上居中元素
OK,這里要使單個元素使用margin: auto在垂直方向上能夠居中元素,需要讓該元素處于 FFC(flex formatting context),或者 GFC(grid formatting context) 上下文中,也就是這些取值中:
{
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
}
FFC 下margin: auto垂直方向可以居中元素的原因
本文暫且不談 grid 布局,我們業(yè)務(wù)中需求中更多的可能是使用 flex 布局,下文將著重圍繞 flex 上下文中自動 margin 的一些表現(xiàn)。
嗯,也有很多前端被戲稱為 flex 工程師,什么布局都 flex 一把梭。
查看 CSS 文檔,原因如下,在dispaly: flex下:
Prior to alignment via justify-content and align-self, any positive free space is distributed to auto margins in that dimension.
CSS Flexible Box Layout Module Level 1 -- 8.1. Aligning with auto margins
簡單翻譯一下,大意是在flex 格式化上下文中,設(shè)置了margin: auto的元素,在通過justify-content和align-self進行對齊之前,任何正處于空閑的空間都會分配到該方向的自動 margin 中去
這里,很重要的一點是,margin auto 的生效不僅是水平方向,垂直方向也會自動去分配這個剩余空間。
使用自動 margin 實現(xiàn) flex 布局下的space-between | space-around
了解了上面最核心的這一句 :
在通過justify-content和align-self進行對齊之前,任何正處于空閑的空間都會分配到該維度中的自動 margin 中去
之后,我們就可以在 flex 布局下使用自動 margin 模擬實現(xiàn) flex 布局下的space-between以及space-around了。
自動 margin 實現(xiàn)space-around
對于這樣一個 flex 布局:
<ul class="g-flex">
<li>liA</li>
<li>liB</li>
<li>liC</li>
<li>liD</li>
<li>liE</li>
</ul>
如果它的 CSS 代碼是:
.g-flex {
display: flex;
justify-content: space-around;
}
li { ... }
效果如下:

那么下面的 CSS 代碼與上面的效果是完全等同的:
.g-flex {
display: flex;
// justify-content: space-around;
}
li {
margin: auto;
}
CodePen Demo -- margin auto 實現(xiàn) flex 下的 space-around
自動 margin 實現(xiàn)space-between
同理,使用自動 margin,也很容易實現(xiàn) flex 下的space-between,下面兩份 CSS 代碼的效果的一樣的:
.g-flex {
display: flex;
justify-content: space-between;
}
li {...}
.g-flex {
display: flex;
// justify-content: space-between;
}
li {
margin: auto;
}
li:first-child {
margin-left: 0;
}
li:last-child {
margin-right: 0;
}
CodePen Demo -- margin auto 實現(xiàn) flex 下的 space-between
當(dāng)然,值得注意的是,很重要的一點:
Note: If free space is distributed to auto margins, the alignment properties will have no effect in that dimension because the margins will have stolen all the free space left over after flexing.
CSS Flexible Box Layout Module Level 1 -- 8.1. Aligning with auto margins
意思是,如果任意方向上的可用空間分配給了該方向的自動 margin ,則對齊屬性(justify-content/align-self)在該維度中不起作用,因為 margin 將在排布后竊取該緯度方向剩余的所有可用空間。
也就是使用了自動 margin 的 flex 子項目,它們父元素設(shè)置的justify-content已經(jīng)它們本身的align-self將不再生效,也就是這里存在一個優(yōu)先級的關(guān)系。
使用自動 margin 實現(xiàn) flex 下的align-self: flex-start | flex-end | center
自動 margin 能實現(xiàn)水平方向的控制,也能實現(xiàn)垂直方向的控制,原理是一樣的。
用margin: auto模擬 flex 下的align-self: flex-start | flex-end | center,可以看看下面幾個 Demo:
CodePen Demo -- margin auto 實現(xiàn) flex 下的 align-self: center
CodePen Demo -- margin auto 實現(xiàn) flex 下的 align-self: flex-end
不同方向上的自動 margin
OK,看完上面的一大段鋪墊之后,大概已經(jīng)初步了解了 FFC 下,自動 margin 的神奇。
無論是多個方向的自動 margin,抑或是單方向的自動 margin,都是非常有用的。
再來看幾個有意思的例子:
使用margin-left: auto實現(xiàn)不規(guī)則兩端對齊布局
假設(shè)我們需要有如下布局:

DOM 結(jié)構(gòu)如下:
<ul class="g-nav">
<li>導(dǎo)航A</li>
<li>導(dǎo)航B</li>
<li>導(dǎo)航C</li>
<li>導(dǎo)航D</li>
<li class="g-login">登陸</li>
</ul>
對最后一個元素使用margin-left: auto,可以很容易實現(xiàn)這個布局:
.g-nav {
display: flex;
}
.g-login {
margin-left: auto;
}
此時,auto的計算值就是水平方向上容器排列所有 li 之后的剩余空間。
當(dāng)然,不一定是要運用在第一個或者最后一個元素之上,例如這樣的布局,也是完全一樣的實現(xiàn):

<ul class="g-nav">
<li>導(dǎo)航A</li>
<li>導(dǎo)航B</li>
<li>導(dǎo)航C</li>
<li>導(dǎo)航D</li>
<li class="g-login">登陸</li>
<li>注冊</li>
</ul>
.g-nav {
display: flex;
}
.g-login {
margin-left: auto;
}

Codepen Demo -- nav list by margin left auto
垂直方向上的多行居中
OK,又或者,我們經(jīng)常會有這樣的需求,一大段復(fù)雜的布局中的某一塊,高度或者寬度不固定,需要相對于它所在的剩余空間居中:

這里有 5 行文案,我們需要其中的第三、第四行相對于剩余空間進行垂直居中。
這里如果使用 flex 布局,簡單的align-self或者align-items好像都沒法快速解決問題。
而使用自動 margin,我們只需要在需要垂直居中的第一個元素上進行margin-top: auto,最后一個元素上進行margin-bottom: auto即可,看看代碼示意:
<div class="g-container">
<p>這是第一行文案</p>
<p>這是第二行文案</p>
<p class="s-thirf">1、剩余多行文案需要垂直居中剩余空間</p>
<p class="s-forth">2、剩余多行文案需要垂直居中剩余空間</p>
<p>這是最后一行文案</p>
</div>
.g-container {
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.s-thirf {
margin-top: auto;
}
.s-forth {
margin-bottom: auto;
}
當(dāng)然,這里將任意需要垂直居中剩余空間的元素用一個 div 包裹起來,對該 div 進行margin: auto 0也是可以的。
嗯,非常的好用且方便:CodePen Demo -- 自動margin快速垂直居中任意段落
使用margin-top: auto實現(xiàn)粘性 footer 布局
OK,最后再來看這樣一個例子。
要求:頁面存在一個 footer 頁腳部分,如果整個頁面的內(nèi)容高度小于視窗的高度,則 footer 固定在視窗底部,如果整個頁面的內(nèi)容高度大于視窗的高度,則 footer 正常流排布(也就是需要滾動到底部才能看到 footer),算是粘性布局的一種。
看看效果:

嗯,這個需求如果能夠使用 flex 的話,使用justify-content: space-between可以很好的解決,同理使用margin-top: auto也非常容易完成:
<div class="g-container">
<div class="g-real-box">
...
</div>
<div class="g-footer"></div>
</div>
.g-container {
height: 100vh;
display: flex;
flex-direction: column;
}
.g-footer {
margin-top: auto;
flex-shrink: 0;
height: 30px;
background: deeppink;
}
Codepen Demo -- sticky footer by flex margin auto
上面的例子旨在介紹更多自動 margin 的使用場景。當(dāng)然,這里不使用 flex 布局也是可以實現(xiàn)的,下面再給出一種不借助 flex 布局的實現(xiàn)方式:
CodePen Demo -- sticky footer by margin/paddig
值得注意的點
自動 margin 還是很實用的,可以使用的場景也很多,有一些上面提到的點還需要再強調(diào)下:
- 塊格式化上下文中
margin-top和margin-bottom的值如果是 auto,則他們的值都為 0 - flex 格式化上下文中,在通過
justify-content和align-self進行對齊之前,任何正處于空閑的空間都會分配到該方向的自動 margin 中去 - 單個方向上的自動 margin 也非常有用,它的計算值為該方向上的剩余空間
- 使用了自動 margin 的 flex 子項目,它們父元素設(shè)置的
justify-content以及它們本身的align-self將不再生效
最后
更多精彩 CSS 技術(shù)文章匯總在我的Github -- iCSS,持續(xù)更新,歡迎點個 star 訂閱收藏。
到此這篇關(guān)于flex 上下文中自動 margin(完整例子)的文章就介紹到這了,更多相關(guān)flex 自動 margin內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
相關(guān)文章

CSS3打造的現(xiàn)代交互式登錄界面詳細實現(xiàn)過程
本文介紹CSS3和jQuery在登錄界面設(shè)計中的應(yīng)用,涵蓋動畫、選擇器、自定義字體及盒模型技術(shù),提升界面美觀與交互性,同時優(yōu)化性能和可訪問性,感興趣的朋友跟隨小編一起看看吧2025-06-20CSS普通流、浮動與定位網(wǎng)頁布局三大機制及最佳實踐
本文給大家講解CSS 的三種核心布局機制——普通流(Normal Flow)、浮動(Float)和定位(Positioning)對于創(chuàng)建靈活、響應(yīng)式的網(wǎng)頁至關(guān)重要,本文將深入探討這三種機制的工作原2025-06-19
css實現(xiàn)角標效果并帶有文章或圖標效果(完整代碼)
文章介紹如何用CSS實現(xiàn)角標效果,通過.active類結(jié)合::after和::before偽元素,利用定位、邊框和旋轉(zhuǎn)創(chuàng)建紅色邊框與白色三角形的提示標志,適用于按鈕或卡片元素的視覺增強設(shè)計2025-06-19CSS Anchor Positioning重新定義錨點定位的時代來臨(最新推薦)
CSS Anchor Positioning是一項仍在草案中的新特性,由 Chrome 125 開始提供原生支持需啟用實驗 flag,它允許你在 CSS 中通過錨點(anchor)來相對于任意 DOM 元素定位,本文2025-06-17CSS中的Static、Relative、Absolute、Fixed、Sticky的應(yīng)用與詳細對比
CSS 中的 position 屬性用于控制元素的定位方式,不同的定位方式會影響元素在頁面中的布局和層疊關(guān)系,以下是 static、relative、absolute、fixed、sticky 的詳細對比和應(yīng)用2025-06-17CSS place-items: center解析與用法詳解
place-items: center; 是一個強大的 CSS 簡寫屬性,用于同時控制 網(wǎng)格(Grid) 和 彈性盒(Flexbox) 布局中的對齊方式,本文給大家介紹CSS place-items: center; 詳解與用法2025-06-17
在日常開發(fā)中,我們經(jīng)常需要讓某個元素占據(jù)容器的剩余空間,本文將介紹5種不同的方法來實現(xiàn)這個需求,并分析各種方法的優(yōu)缺點,感興趣的朋友一起看看吧2025-06-17CSS中前端單位 px、vw、vh 等的區(qū)別與使用建議
CSS單位區(qū)別與使用場景總結(jié):px絕對、vw/vh響應(yīng)式,%繼承父尺寸,em/rem文字縮放,vmin/vmax適應(yīng)寬高變化,固定布局用px或%,響應(yīng)式布局用vw/vh/rem,文字用em或rem,本文給大家2025-06-16CSS 樣式表的四種應(yīng)用方式及css注釋的應(yīng)用小結(jié)
這篇文章主要介紹了CSS 樣式表的四種應(yīng)用方式及css注釋的應(yīng)用小結(jié),本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2025-05-21- 在CSS布局中,padding屬性是控制元素內(nèi)容與其邊框之間距離的關(guān)鍵工具,本文介紹CSS基礎(chǔ)中padding,通過本文的介紹,我們深入了解了padding的基本概念、簡寫方法以及它對元2025-05-16




