CSS布局--Flex布局（彈性布局）

布局的傳統(tǒng)解決方案：是基于盒模型，這種布局依賴(lài)display屬性 + position屬性 + float屬性，但是對(duì)于一些特殊的布局是不方便的，比如說(shuō)：對(duì)于垂直布局就不容易實(shí)現(xiàn)。

Flex布局是什么？

Flex布局又被稱(chēng)為彈性布局，用來(lái)為盒模型提供最大的靈活性，任意的容器、行內(nèi)元素都可以使用Flex布局。
ps:設(shè)定為Flex布局之后，子元素的float、clear和vertical-align屬性將會(huì)失效。

基本概念

采用Flex布局的元素。被稱(chēng)為Flex容器，簡(jiǎn)稱(chēng)為‘容器’。他的所有的子元素自動(dòng)成為容器的成員，成為Flex的項(xiàng)目。

Flex基本概念

容器默認(rèn)存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開(kāi)始位置（與邊框的交叉點(diǎn)）叫做main start，結(jié)束位置叫做main end；交叉軸的開(kāi)始位置叫做cross start，結(jié)束位置叫做cross end。

項(xiàng)目默認(rèn)沿主軸排列。單個(gè)項(xiàng)目占據(jù)的主軸空間叫做main size，占據(jù)的交叉軸空間叫做cross size。

Flex的屬性設(shè)置

flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content

flex-direction

.project{
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction:column;    /* row | row-reverse | column | column-reverse;*/
}
.item{
    height: 100px;
    width: 100px;
    border: 1px red solid;
}

<div class='project'>
    <div class ='item'></div>
    <div class ='item'></div>
    <div class ='item'></div>
</div>

column-reverse：主軸為垂直方向，起點(diǎn)在下沿。
column：主軸為垂直方向，起點(diǎn)在上沿。
row（默認(rèn)值）：主軸為水平方向，起點(diǎn)在左端。
row-reverse：主軸為水平方向，起點(diǎn)在右端。

flex-direction的屬性

flex-wrap
在該布局下，所有的項(xiàng)目都排在一條線上，但是當(dāng)一跳軸線排不下的時(shí)候，就要換行，這個(gè)屬性解決的就是如何換行的問(wèn)題。

.project{
    height: 100%;
    width: 100%;
    display: flex;
    flex-wrap:nowrap;   /* nowrap | wrap | wrap-reverse;*/
}
.item{
    height: 400px;
    width: 400px;
    border: 1px red solid;
}

<div class='project'>
    <div class ='item'>1</div>
    <div class ='item'>2</div>
    <div class ='item'>3</div>
    <div class ='item'>4</div>
    <div class ='item'>5</div>
    <div class ='item'>6</div>
</div>

nowrap（默認(rèn)值）：不換行。
wrap：換行，第一行在上方。。
wrap-reverse：換行，第一行在下方。

nowrap不換行
wrap 換行，第一行在上面
wrap-reverse 換行，第一行在下

flex-flow
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡(jiǎn)寫(xiě)形式，默認(rèn)值為row nowrap

.project{
        height: 100%;
        width: 100%;
        display: flex;
        flex-flow: column wrap;
    }
.item{
        height: 400px;
        width: 400px;
        border: 1px red solid;
    }

justify-content
justify-content屬性定義了項(xiàng)目在主軸上的對(duì)齊方式。

.project{
        border:solid 1px black;
        height: 50px;
        width: 100%;
        display: flex;
        justify-content:space-between;/* flex-start | flex-end | center | space-between | space-around;*/
}
.item{
    height: 50px;
    width: 100px;
    border: 1px red solid;
}
justify-content屬性

flex-start（默認(rèn)值）：左對(duì)齊
flex-end：右對(duì)齊
center： 居中
space-between：兩端對(duì)齊，項(xiàng)目之間的間隔都相等。
space-around：每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等。所以，項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍。

align-items屬性

align-items屬性定義項(xiàng)目在交叉軸上如何對(duì)齊。

.project{
        border:solid 1px black;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: baseline;
    }
.item{
        margin-top: 100px;
        height: 50px;
        width: 100px;
        border: 1px red solid;
    }
.item2{
        height: 100px;
        width: 100px;
        border: 1px red solid;
    }
.item3{
        height: 150px;
        width: 100px;
        border: 1px red solid;
    }

align-items的屬性

都很好理解，就是baseline存在一定的歧義。我們通過(guò)一個(gè)小栗子來(lái)進(jìn)行了解。

flex-start：交叉軸的起點(diǎn)對(duì)齊。
flex-end：交叉軸的終點(diǎn)對(duì)齊。
center：交叉軸的中點(diǎn)對(duì)齊。
baseline: 項(xiàng)目的第一行文字的基線對(duì)齊。
stretch（默認(rèn)值）：如果項(xiàng)目未設(shè)置高度或設(shè)為auto，將占滿(mǎn)整個(gè)容器的高度。

align-content

align-content屬性定義了多根軸線的對(duì)齊方式。如果項(xiàng)目只有一根軸線，該屬性不起作用。也就是說(shuō)item存在換行的情況存在

.project{
        border:solid 1px black;
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        align-content: space-between;
    }
.item{
        height: 50px;
        width: 100px;
        border: 1px red solid;
    }
align-content

flex-start：與交叉軸的起點(diǎn)對(duì)齊。
flex-end：與交叉軸的終點(diǎn)對(duì)齊。
center：與交叉軸的中點(diǎn)對(duì)齊。
space-between：與交叉軸兩端對(duì)齊，軸線之間的間隔平均分布。
space-around：每根軸線兩側(cè)的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch（默認(rèn)值）：軸線占滿(mǎn)整個(gè)交叉軸。

項(xiàng)目屬性

order、flex-grow、flex-shrink、flex-basis、flex、align-self

order
order屬性定義項(xiàng)目的排列順序。數(shù)值越小，排列越靠前，默認(rèn)為0。

.project{
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        align-content: space-between;
        }
.item{
        order: 1;
        height: 50px;
        width: 100px;
        border: 1px red solid;
    }
.item2{
        order: 3;
        height: 50px;
        width: 100px;
        border: 1px red solid;
        }
.item3{
        order: 2;
        height: 50px;
        width: 100px;
        border: 1px red solid;
        }

<div class='project'>
    <div class ='item'>item1</div>
    <div class ='item2'>item2</div>
    <div class ='item3'>item3</div> 
</div>
order屬性的使用

flex-grow
flex-grow屬性定義項(xiàng)目的放大比例，默認(rèn)為0，即如果存在剩余空間，也不放大，屬性的值是數(shù)字。

.project{
        width: 100%;
        height: 100%;
        display: flex;
    }
.item{
        flex-grow: 1;
        height: 50px;
        width: 100px;
        border: 1px red solid;
    }
.item2{
        flex-grow: 0;
        height: 50px;
        width: 100px;
        border: 1px red solid;
    }
.item3{
        flex-grow: 1;
        height: 50px;
        width: 100px;
        border: 1px red solid;
    }

如果所有項(xiàng)目的flex-grow屬性都為1，則它們將等分剩余空間（如果有的話(huà)）。如果一個(gè)項(xiàng)目的flex-grow屬性為2，其他項(xiàng)目都為1，則前者占據(jù)的剩余空間將比其他項(xiàng)多一倍。

flex-shrink
這個(gè)屬性定義了項(xiàng)目縮小的比例，這個(gè)值默認(rèn)是1，即如果空間不足的時(shí)候，這個(gè)項(xiàng)目就會(huì)縮小，如果所有的flex-shrink屬性值都為1，當(dāng)空間不足的時(shí)候，都進(jìn)行等比的縮小，但是如果有一個(gè)項(xiàng)目的flex-shrink為0，其他項(xiàng)目的值為1的時(shí)候，空間不足的時(shí)候，值為0的項(xiàng)目不會(huì)縮小。

flex-basis
flex-basis屬性定義了在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間（main size）。瀏覽器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余空間。它的默認(rèn)值為auto，即項(xiàng)目的本來(lái)大小。它可以設(shè)為跟width或height屬性一樣的值（比如350px），則項(xiàng)目將占據(jù)固定空間。相當(dāng)于對(duì)項(xiàng)目設(shè)置了寬度。

flex
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡(jiǎn)寫(xiě)，默認(rèn)值為0 1 auto。后兩個(gè)屬性可選。flex屬性是flex-grow, flex-shrink 和 flex-basis的簡(jiǎn)寫(xiě)，默認(rèn)值為0 1 auto。后兩個(gè)屬性可選。

align-self
align-self屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式，可覆蓋align-items屬性。默認(rèn)值為auto，表示繼承父元素的align-items屬性，如果沒(méi)有父元素，則等同于stretch。

參照：Flex 布局教程：語(yǔ)法篇

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 1.Flex布局是什么？ Flex是Flexible Box的縮寫(xiě)，就是靈活的彈性頁(yè)面布局。 作用是為盒子模型提供...
    LiLi原上草閱讀 773評(píng)論 0贊 7
  • 原文鏈接(阮一峰) 一、Flex 布局 Flex 是 Flexible Box 的縮寫(xiě)，意為"彈性布局"，用來(lái)為盒...
    楓_d646閱讀 730評(píng)論 0贊 1
  • 一般而言，css布局使用float+position+display布局，但是有的時(shí)候?yàn)榱藢?shí)現(xiàn)一個(gè)效果，使用傳統(tǒng)的...
    ITtian閱讀 288評(píng)論 0贊 0
  • flex布局（彈性布局） 很久之前在阮一峰老師的隨筆上就看到了他對(duì)這個(gè)屬性的了解，有興趣的同學(xué)可以參考他的博客 F...
    pro_xiaoy閱讀 631評(píng)論 0贊 0
  • 簡(jiǎn)書(shū)簽約作者|米格格 故事很長(zhǎng)，愿你有耐心聽(tīng)我講下去…我是一個(gè)土生土長(zhǎng)的北京姑娘，卻也有過(guò)和北漂們一樣的租房生活。...
    米格格閱讀 6,023評(píng)論 67贊 97

友情鏈接更多精彩內(nèi)容