CSS6：flex布局

Jioby 發(fā)布于2019-08-29 17:09 / 2604人閱讀

摘要：主要用來(lái)做橫向的布局。元素的布局學(xué)習(xí)我分成兩個(gè)部分，第一個(gè)部分是元素布局。以下幾個(gè)屬性影響著元素的布局。詳細(xì)還是看分鐘徹底弄懂布局講的非常明白。的時(shí)候，伸縮時(shí)需要考慮，按照進(jìn)行等比例伸縮。布局套路學(xué)習(xí)布局教程實(shí)例篇

前言：
這是我看過(guò)最好的flex布局教程：
30分鐘徹底弄懂flex布局

傳統(tǒng)的布局方法與flex屬性通覽

文檔流：塊級(jí)元素獨(dú)占一行，從上往下排列，行級(jí)元素從左往右排列。

display inline-block主要用來(lái)做橫向的布局。
用分離負(fù)maigin用來(lái)產(chǎn)生位移。

元素的布局

學(xué)習(xí)flex我分成兩個(gè)部分，第一個(gè)部分是元素布局。以下幾個(gè)屬性影響著元素的布局。

/*容器上：*/
justify-content
align-items
flex-direction
flex-wrap
flex-flow
align-content
/*元素上：*/
order
align-self

做完下面的游戲，看完下面的兩篇文章，理解了上面幾個(gè)屬性的用法，就理解了元素的布局。他們已經(jīng)寫得很詳細(xì)了。這里不需要我班門弄斧。
30分鐘徹底弄懂flex布局
Flex 布局教程：語(yǔ)法篇

CSS3【Flex布局】有趣的青蛙游戲
游戲一共24關(guān)，每關(guān)把所有顏色青蛙移動(dòng)到對(duì)應(yīng)顏色荷葉上即可過(guò)關(guān)
通關(guān)后就會(huì)使用影響布局的屬性。

伸縮與尺寸

而影響大小和伸縮與尺寸的屬性flex-grow、flex-shrink、flex-basis這三個(gè)屬性比較難理解，可以看30分鐘徹底弄懂flex布局和深入理解flex布局的flex-grow、flex-shrink、flex-basis

在這里記錄一下自己的理解。

flex-basis

flex-basis 用于設(shè)置元素在主軸上的大小（如果軸體變成從上到下，就會(huì)覆蓋height）。

flex-basis: 0 表示元素根據(jù)內(nèi)容撐開寬度，width不管用了。

flex-basis優(yōu)先級(jí)比width高。

flex-basis為auto時(shí)，如設(shè)置了width則元素尺寸由width決定；沒(méi)有設(shè)置則由內(nèi)容決定。（默認(rèn)就是auto）所以如果一個(gè)容器設(shè)置為flex布局，那么他里面的元素在沒(méi)有設(shè)置寬高的時(shí)候，大小都由內(nèi)容撐開！

詳細(xì)還是看30分鐘徹底弄懂flex布局講的非常明白

flex-shrink

如果不換行flex-wrap: nowrap;主軸上的元素總和超了容器寬度，那么默認(rèn)會(huì)縮小。

flex-shrink默認(rèn)是1，即縮小因子是1，也就是當(dāng)不夠分配時(shí)，元素都將等比例縮小，占滿整個(gè)寬度。

flex-shrink是0表示這個(gè)元素不縮小，如果超了，就在其他元素上動(dòng)手腳縮小。

詳細(xì)還是看30分鐘徹底弄懂flex布局講的非常明白。

flex-grow

默認(rèn)為flex-grow:0，即，不擴(kuò)大。原來(lái)是多大就是多大（flex-basic或者width、height的長(zhǎng)度）

然后按照擴(kuò)大因子按權(quán)分配。例如有50px沒(méi)有分配，兩個(gè)子元素flex-grow:分別為flex-grow:3和flex-grow:2，那么第一個(gè)元素就分配30px，第二個(gè)元素分配20px。

如果第一個(gè)元素設(shè)置flex-grow為1，另一個(gè)沒(méi)有設(shè)置，那么多出來(lái)的全部的大小都會(huì)分配給第一個(gè)元素。

詳細(xì)還是看30分鐘徹底弄懂flex布局講的非常明白。

flex

flex = flex-grow + flex-shrink + flex-basis
一些簡(jiǎn)寫

flex: 1 = flex: 1 1 0%//
flex: 2 = flex: 2 1 0%
flex: auto = flex: 1 1 auto;
flex: none = flex: 0 0 auto; // **常用于固定尺寸 不伸縮**

flex: 1和 flex: auto的區(qū)別

flex-grow + flex-shrink都是1的話意思就是不管是超出這一行，還是小于這一行，都按比例占滿這一行（放大或縮小元素）！！

flex:1 和 flex:auto 的區(qū)別
都是按比例放大縮小，然后占滿一行。
其實(shí)可以歸結(jié)于flex-basis:0和flex-basis:auto的區(qū)別。flex-basis是指定初始尺寸，當(dāng)設(shè)置為0時(shí)（絕對(duì)彈性元素），此時(shí)相當(dāng)于告訴flex-grow和flex-shrink在伸縮的時(shí)候不需要考慮我的尺寸；相反當(dāng)設(shè)置為auto時(shí)（相對(duì)彈性元素），此時(shí)則需要在伸縮時(shí)將元素尺寸納入考慮。
總結(jié)：

flex: 1的時(shí)候，伸縮時(shí)不需要考慮width，因?yàn)?b>flex-basis:0（元素為內(nèi)容撐開的寬度），只需要按照元素的內(nèi)容寬度進(jìn)行等比例的伸縮。

flex: auto的時(shí)候，伸縮時(shí)需要考慮width，按照width進(jìn)行等比例伸縮。

舉例：flex：1應(yīng)用：

#container{
    display: flex;
    flex-wrap: nowrap;
    width: 200px;
    height: 200px;
    background-color: orange;
}

#item:nth-child(1){
    flex:1;/*這里*/
    width: 100px;

    height:100px;
    background-color: blue;
}
#item:nth-child(2){
    flex:1;/*這里*/
    width:50px;

    height:100px;
    background-color: green;
}
#item:nth-child(3){
    /* flex:1; *//*這里沒(méi)寫*/
    width:30px;

    height: 100px;
    background-color: #ccc;
}

前兩個(gè)元素將剩余的空間平局分了，因?yàn)闆](méi)有內(nèi)容，顯示的寬度都是0，于是兩個(gè)元素分得的擴(kuò)大像素一樣，所以平分了。

而如果是flex：auto，那么將會(huì)根據(jù)width按比例伸縮，占滿一行。

flex布局套路學(xué)習(xí)

Flex 布局教程：實(shí)例篇