css中flex布局的使用方法-創(chuàng)新互聯(lián)

創(chuàng)新互聯(lián)www.cdcxhl.cn八線動(dòng)態(tài)BGP香港云服務(wù)器提供商，新人活動(dòng)買多久送多久，劃算不套路！

成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作,成都做網(wǎng)站公司-創(chuàng)新互聯(lián)已向1000+企業(yè)提供了,網(wǎng)站設(shè)計(jì),網(wǎng)站制作,網(wǎng)絡(luò)營(yíng)銷等服務(wù)!設(shè)計(jì)與技術(shù)結(jié)合,多年網(wǎng)站推廣經(jīng)驗(yàn),合理的價(jià)格為您打造企業(yè)品質(zhì)網(wǎng)站。

這篇文章運(yùn)用簡(jiǎn)單易懂的例子給大家介紹css中flex布局的使用方法，代碼非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

Flex是Flexible Box的縮寫，意為"彈性布局"，用來(lái)為盒狀模型提供大的靈活性。任何一個(gè)容器都可以指定為Flex布局。

布局的傳統(tǒng)解決方案，基于盒狀模型，依賴 display屬性 + position屬性 + float屬性。它對(duì)于那些特殊布局非常不方便，比如，垂直居中就不容易實(shí)現(xiàn)。2009年，W3C提出了一種新的方案----Flex布局，可以簡(jiǎn)便、完整、響應(yīng)式地實(shí)現(xiàn)各種頁(yè)面布局。目前，它已經(jīng)得到了所有瀏覽器的支持，這意味著，現(xiàn)在就能很安全地使用這項(xiàng)功能。Flex布局將成為未來(lái)布局的選方案。

水平垂直居中也算是 CSS 領(lǐng)域最為常見的一個(gè)問題了，不同場(chǎ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 在垂直方向上居中元素

嗯。這里其實(shí)就涉及了一個(gè)問題，如何讓 margin: auto 在垂直方向上生效？

換句話說，傳統(tǒng)的 display: block BFC（塊格式化上下文）下，為什么 margin: auto 在水平方向可以居中元素在垂直方向卻不行？

通常我們會(huì)使用這段代碼：

div {
    width: 200px;
    height: 200px;
    margin: 0 auto;
}

讓元素相對(duì)父元素水平居中。但是如果我們想讓元素相對(duì)父元素垂直居中的話，使用 margin: auto 0是不生效的。

BFC 下 margin: auto 垂直方向無(wú)法居中元素的原因

查看 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

簡(jiǎn)單翻譯下，在塊格式化上下文中，如果 margin-left 和 margin-right 都是 auto，則它們的表達(dá)值相等，從而導(dǎo)致元素的水平居中。( 這里的計(jì)算值為元素剩余可用剩余空間的一半)

而如果 margin-top 和 margin-bottom 都是 auto，則他們的值都為 0，當(dāng)然也就無(wú)法造成垂直方向上的居中。

使用 FFC/GFC 使 margin: auto 在垂直方向上居中元素

OK，這里要使單個(gè)元素使用 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 上下文中自動(dòng) 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

簡(jiǎn)單翻譯一下，大意是在 flex 格式化上下文中，設(shè)置了 margin: auto 的元素，在通過 justify-content和 align-self 進(jìn)行對(duì)齊之前，任何正處于空閑的空間都會(huì)分配到該方向的自動(dòng) margin 中去

這里，很重要的一點(diǎn)是，margin auto 的生效不僅是水平方向，垂直方向也會(huì)自動(dòng)去分配這個(gè)剩余空間。

使用自動(dòng) margin 實(shí)現(xiàn) flex 布局下的 space-between | space-around

了解了上面最核心的這一句 :

●　在通過 justify-content 和 align-self 進(jìn)行對(duì)齊之前，任何正處于空閑的空間都會(huì)分配到該維度中的自動(dòng) margin 中去

之后，我們就可以在 flex 布局下使用自動(dòng) margin 模擬實(shí)現(xiàn) flex 布局下的 space-between 以及 space-around 了。

自動(dòng) margin 實(shí)現(xiàn) space-around

對(duì)于這樣一個(gè) 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中flex布局的使用方法

那么下面的 CSS 代碼與上面的效果是完全等同的：

.g-flex {
    display: flex;
    // justify-content: space-around;
}
 
li {
    margin: auto;
}

CodePen Demo -- margin auto 實(shí)現(xiàn) flex 下的 space-around

自動(dòng) margin 實(shí)現(xiàn) space-between

同理，使用自動(dòng) margin，也很容易實(shí)現(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 實(shí)現(xiàn) flex 下的 space-between

當(dāng)然，值得注意的是，很重要的一點(diǎn)：

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

意思是，如果任意方向上的可用空間分配給了該方向的自動(dòng) margin ，則對(duì)齊屬性（justify-content/align-self）在該維度中不起作用，因?yàn)?margin 將在排布后竊取該緯度方向剩余的所有可用空間。

也就是使用了自動(dòng) margin 的 flex 子項(xiàng)目，它們父元素設(shè)置的 justify-content 已經(jīng)它們本身的 align-self 將不再生效，也就是這里存在一個(gè)優(yōu)先級(jí)的關(guān)系。

使用自動(dòng) margin 實(shí)現(xiàn) flex 下的 align-self: flex-start | flex-end | center

自動(dòng) margin 能實(shí)現(xiàn)水平方向的控制，也能實(shí)現(xiàn)垂直方向的控制，原理是一樣的。

用 margin: auto 模擬 flex 下的 align-self: flex-start | flex-end | center，可以看看下面幾個(gè) Demo：

●　CodePen Demo -- margin auto 實(shí)現(xiàn) flex 下的 align-self: center

●　CodePen Demo -- margin auto 實(shí)現(xiàn) flex 下的 align-self: flex-end

不同方向上的自動(dòng) margin

OK，看完上面的一大段鋪墊之后，大概已經(jīng)初步了解了 FFC 下，自動(dòng) margin 的神奇。

無(wú)論是多個(gè)方向的自動(dòng) margin，抑或是單方向的自動(dòng) margin，都是非常有用的。

再來(lái)看幾個(gè)有意思的例子：

使用 margin-left: auto 實(shí)現(xiàn)不規(guī)則兩端對(duì)齊布局

假設(shè)我們需要有如下布局：

css中flex布局的使用方法

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>

對(duì)最后一個(gè)元素使用 margin-left: auto，可以很容易實(shí)現(xiàn)這個(gè)布局：

.g-nav {
    display: flex;
}
 
.g-login {
    margin-left: auto;
}

此時(shí)， auto 的計(jì)算值就是水平方向上容器排列所有 li 之后的剩余空間。

當(dāng)然，不一定是要運(yùn)用在第一個(gè)或者最后一個(gè)元素之上，例如這樣的布局，也是完全一樣的實(shí)現(xiàn)：

css中flex布局的使用方法

<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>注冊(cè)</li>
</ul>

.g-nav {
    display: flex;
}
 
.g-login {
    margin-left: auto;
}

css中flex布局的使用方法

Codepen Demo -- nav list by margin left auto

垂直方向上的多行居中

OK，又或者，我們經(jīng)常會(huì)有這樣的需求，一大段復(fù)雜的布局中的某一塊，高度或者寬度不固定，需要相對(duì)于它所在的剩余空間居中：

css中flex布局的使用方法

這里有 5 行文案，我們需要其中的第三、第四行相對(duì)于剩余空間進(jìn)行垂直居中。

這里如果使用 flex 布局，簡(jiǎn)單的 align-self 或者 align-items 好像都沒法快速解決問題。

而使用自動(dòng) margin，我們只需要在需要垂直居中的第一個(gè)元素上進(jìn)行 margin-top: auto，最后一個(gè)元素上進(jìn)行 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)然，這里將任意需要垂直居中剩余空間的元素用一個(gè) div 包裹起來(lái)，對(duì)該 div 進(jìn)行 margin: auto 0也是可以的。

嗯，非常的好用且方便：CodePen Demo -- 自動(dòng)margin快速垂直居中任意段落

使用 margin-top: auto 實(shí)現(xiàn)粘性 footer 布局

OK，最后再來(lái)看這樣一個(gè)例子。

要求：頁(yè)面存在一個(gè) footer 頁(yè)腳部分，如果整個(gè)頁(yè)面的內(nèi)容高度小于視窗的高度，則 footer 固定在視窗底部，如果整個(gè)頁(yè)面的內(nèi)容高度大于視窗的高度，則 footer 正常流排布（也就是需要滾動(dòng)到底部才能看到 footer），算是粘性布局的一種。

看看效果：

css中flex布局的使用方法

嗯，這個(gè)需求如果能夠使用 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

上面的例子旨在介紹更多自動(dòng) margin 的使用場(chǎng)景。當(dāng)然，這里不使用 flex 布局也是可以實(shí)現(xiàn)的，下面再給出一種不借助 flex 布局的實(shí)現(xiàn)方式：

CodePen Demo -- sticky footer by margin/paddig

值得注意的點(diǎn)

自動(dòng) margin 還是很實(shí)用的，可以使用的場(chǎng)景也很多，有一些上面提到的點(diǎn)還需要再?gòu)?qiáng)調(diào)下：

塊格式化上下文中margin-top 和 margin-bottom 的值如果是 auto，則他們的值都為 0
flex 格式化上下文中，在通過 justify-content 和 align-self 進(jìn)行對(duì)齊之前，任何正處于空閑的空間都會(huì)分配到該方向的自動(dòng) margin 中去
單個(gè)方向上的自動(dòng) margin 也非常有用，它的計(jì)算值為該方向上的剩余空間
使用了自動(dòng) margin 的 flex 子項(xiàng)目，它們父元素設(shè)置的 justify-content 以及它們本身的 align-self 將不再生效

關(guān)于css中flex布局的使用方法就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

標(biāo)題名稱：css中flex布局的使用方法-創(chuàng)新互聯(lián)
本文URL：http://jinyejixie.com/article14/djssge.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、軟件開發(fā)、營(yíng)銷型網(wǎng)站建設(shè)、搜索引擎優(yōu)化、網(wǎng)站營(yíng)銷、網(wǎng)站策劃

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

css中flex布局的使用方法-創(chuàng)新互聯(lián)