flex布局--flex-grow例朱、flex-shrink、flex-basis

  • flex-grow
    flex-grow 只有在 flex 容器中有剩余空間時才會生效鱼蝉。flex 項的 flex-grow 屬性指定該 flex 項相對于其他 flex 項將拉伸多少洒嗤,以填充 flex 容器。默認值為1魁亦。當設置為 0 時渔隶,該 flex 項將不會被拉伸去填補剩余空間。在這個例子中洁奈,兩個項的比例是 1:2间唉,意思是在被拉伸時绞灼,第一個 flex 項將占用剩余空間的 1/3,而第二個 flex 項將占據(jù)剩余空間的2/3呈野。(如果item不定義flex-grow镀赌,也不定義寬度,則item寬度由內容決定)
<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .flex-container {
        display: flex;
        width: 180px;
        padding: 10px;
        background-color: #F0f0f0;
    }
    
    .flex-item1 {
        flex-grow: 0;
    }
    
    .flex-item2 {
        flex-grow: 1;
    }
    
    .flex-item3 {
        flex-grow: 2;
    }
    
    .flex-container .flex-item {
        padding: 20px 0;
        text-align: center;
        width: 30px;
        background-color: #B1FF84;
    }
    
    .flex-container .flex-item:first-child {
        background-color: #F5DE25;
    }
    
    .flex-container .flex-item:last-child {
        background-color: #90D9F7;
    }
</style>



<body>
    <div class="flex-container">
        <div class="flex-item flex-item1">1</div>
        <div class="flex-item flex-item2">2</div>
        <div class="flex-item flex-item3">3</div>
    </div>
    </div>
</body>



</html>

上例中际跪,item的寬度即使不定義商佛,item2和item3也會拉升,item1寬度由內容決定

  • flex-basis
    flex-basis屬性定義了項目占據(jù)的主軸空間姆打。瀏覽器根據(jù)這個屬性良姆,計算主軸多余空間或不足空間的大小。它的默認值為auto幔戏,即項目的本來大小
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>flesbox</title>

    <style>
        .wrapper {
            display: flex;
            flex-flow: row wrap;
            font-weight: bold;
            text-align: center;
            background-color: red;
        }
        
        .item {
            background-color: pink;
            margin: 10px;
        }
        
        body {
            padding: 2em;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="item item1">item1</div>
        <div class="item item2">item1</div>
    </div>
</body>

</html>

容器寬度默認充滿父元素
flex-grow默認是0(不會拉升填充剩余空間)玛追,這樣每個item的默認寬度是由內容決定
效果圖如下:



設置item的寬度,讓其超過容器闲延,由于設置了flex-flow: row wrap;這時候會換行

 .item {
            background-color: pink;
            margin: 10px;
            width: 80%;
        }

如果同時設置了width和flex-basis,以flex-basis為準

  .item {
            background-color: pink;
            margin: 10px;
            width: 80%;
            flex-basis: 100px;
        }

相當于:

  .item {
            background-color: pink;
            margin: 10px;
            width: 100px;
        }

如果flex-basis設置為auto痊剖,則item的寬度取width的值

  .item {
            background-color: pink;
            margin: 10px;
            width: 80%;
            flex-basis: auto;
        }

 .item {
            background-color: pink;
            margin: 10px;
            width: 80%;
        }

是一個意思

max-width/min-width不會因為flex-basis失效

  .item {
            background-color: pink;
            margin: 10px;
            flex-basis: 800px;
            max-width: 100px;
        }

item的寬度不會大于100px

  • flex-shrink
    任何情況下,item都會被container包裹垒玲,不會超過陆馁,如果container空間不夠,item會自動壓縮
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .flex-container {
        display: flex;
        width: 50px;
    }
    /* 以下為輔助樣式 */
    
    .flex-container {
        background-color: #F0f0f0;
    }
    
    .flex-container .flex-item {
        width: 50px;
        text-align: center;
        background-color: #B1FF84;
    }
    
    .flex-container .flex-item:first-child {
        background-color: #F5DE25;
    }
    
    .flex-container .flex-item:last-child {
        background-color: #90D9F7;
    }
</style>

<body>
    <div class="flex-container">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
    </div>
</body>

</html>

上例中item的寬度會縮小到25px
之所以會自動壓縮合愈,是因為flex-shrink的默認值是1叮贩,容器寬度不夠容納所有item時,flex-shrink規(guī)定了item縮短的比例佛析,默認是平均縮短

  • flex-grow益老、flex-shrink都是優(yōu)先保證其定義的寬度,有剩余或不夠時寸莫,把剩余或不夠的部分按指定的比例分配
    比如這個
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #box {
            width: 100%;
            height: 100px;
            display: flex;
            margin: 10px;
        }
        
        #left,
        #right {
            flex-basis: 400px;/* 或width:200px */
            height: 100px;
            margin: 10px;
            background-color: #999;
        }
        
        #center {
            flex-grow: 1;
            height: 100px;
            margin: 10px;
            background-color: #f00;
        }
    </style>
</head>

<body>
    <div id="box">
        <div id="left">left</div>
        <div id="center">center</div>
        <div id="right">right</div>
    </div>
</body>

</html>

縮小時捺萌,開始左右兩側div固定為400px,逐漸壓縮中間的div膘茎,中間的div只夠容納其內容桃纯,無法再壓縮時,再壓縮左右兩側div
拉升時辽狈,左右兩側從小于400px逐漸拉升到400px后保持400px 慈参,再拉升則剩余的空間都加到中間div上
可以把box的min-width限定為1000px呛牲,以使其足夠容納左右各400px的固定長度刮萌,這樣左右兩個div長度就不會變化了,瀏覽器縮小到不夠顯示時會出現(xiàn)滾動條

#box {
            min-width: 1000px;
            height: 100px;
            display: flex;
            margin: 10px;
        }
  • flex 是 flex-grow娘扩、flex-shrink着茸、flex-basis的縮寫壮锻,
    flex-grow默認值是0,flex-shrink默認值是1涮阔,flex-basis是auto(item寬度)
    所以flex 的默認值是 0 1 auto
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末猜绣,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子敬特,更是在濱河造成了極大的恐慌掰邢,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,743評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件伟阔,死亡現(xiàn)場離奇詭異辣之,居然都是意外死亡,警方通過查閱死者的電腦和手機皱炉,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,296評論 3 385
  • 文/潘曉璐 我一進店門怀估,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人合搅,你說我怎么就攤上這事多搀。” “怎么了灾部?”我有些...
    開封第一講書人閱讀 157,285評論 0 348
  • 文/不壞的土叔 我叫張陵康铭,是天一觀的道長。 經(jīng)常有香客問我赌髓,道長麻削,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,485評論 1 283
  • 正文 為了忘掉前任春弥,我火速辦了婚禮呛哟,結果婚禮上,老公的妹妹穿的比我還像新娘匿沛。我一直安慰自己扫责,他們只是感情好,可當我...
    茶點故事閱讀 65,581評論 6 386
  • 文/花漫 我一把揭開白布逃呼。 她就那樣靜靜地躺著鳖孤,像睡著了一般。 火紅的嫁衣襯著肌膚如雪抡笼。 梳的紋絲不亂的頭發(fā)上苏揣,一...
    開封第一講書人閱讀 49,821評論 1 290
  • 那天,我揣著相機與錄音推姻,去河邊找鬼平匈。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的增炭。 我是一名探鬼主播忍燥,決...
    沈念sama閱讀 38,960評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼隙姿!你這毒婦竟也來了梅垄?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 37,719評論 0 266
  • 序言:老撾萬榮一對情侶失蹤输玷,失蹤者是張志新(化名)和其女友劉穎队丝,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體欲鹏,經(jīng)...
    沈念sama閱讀 44,186評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡炭玫,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,516評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了貌虾。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片吞加。...
    茶點故事閱讀 38,650評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖尽狠,靈堂內的尸體忽然破棺而出衔憨,到底是詐尸還是另有隱情,我是刑警寧澤袄膏,帶...
    沈念sama閱讀 34,329評論 4 330
  • 正文 年R本政府宣布践图,位于F島的核電站,受9級特大地震影響沉馆,放射性物質發(fā)生泄漏码党。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,936評論 3 313
  • 文/蒙蒙 一斥黑、第九天 我趴在偏房一處隱蔽的房頂上張望揖盘。 院中可真熱鬧,春花似錦锌奴、人聲如沸兽狭。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,757評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽箕慧。三九已至,卻和暖如春茴恰,著一層夾襖步出監(jiān)牢的瞬間颠焦,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,991評論 1 266
  • 我被黑心中介騙來泰國打工往枣, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留伐庭,地道東北人粉渠。 一個月前我還...
    沈念sama閱讀 46,370評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像似忧,于是被迫代替她去往敵國和親渣叛。 傳聞我的和親對象是個殘疾皇子丈秩,可洞房花燭夜當晚...
    茶點故事閱讀 43,527評論 2 349