第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

首頁 慕課教程 CSS3 入門教程 CSS3 入門教程 flex: grow、shrink、basis
如風(fēng)般魅影 · 更新于 2020-05-05

flex 彈性盒子

display:flex 和接下來我們介紹的這個 flex 是有區(qū)別的，前者是修改display實現(xiàn)彈性和模型的，而 flex 僅僅是彈性盒模型下 flex-grow、flex-shrink 和 flex-basis三個的縮寫屬性，用來定義和模型內(nèi)部的子元素在瀏覽器重的展示形式。 下面我們主要講這三個屬性。

1. 官方定義

屬性用于設(shè)置或檢索彈性盒模型對象的子元素如何分配空間。
flex 屬性是 flex-grow、flex-shrink 和 flex-basis 屬性的簡寫屬性。

2. 慕課解釋

fl父元素設(shè)置成 dispaly：flex 之后子元素的空間分配通過 flex 設(shè)置，其特點為彈性，即內(nèi)部分配空間如果按照比例分配則其不會隨著父元尺寸變化而變化。

3. 語法

子元素

{
    flex: flex-grow flex-shrink flex-basis|auto|initial|inherit|none;
}

屬性說明

參數(shù)名稱 參數(shù)類型 解釋
flex-grow number 其它子元素的比例關(guān)系默認(rèn)為 0 ，存在剩余空間不擴大
flex-shrink number 默認(rèn)為1空間不足時候縮小
flex-basis | ‘a(chǎn)uto’ 設(shè)定一個長度或者自動填充

4. 兼容性

flex:

IE Edge Firefox Chrome Safari Opera ios android
– – 63-74 84-85 – – – –

flex-grow| flex-shrink|flex-basis:

IE Edge Firefox Chrome Safari Opera ios android
10+ 12+ 28+ 4+ 6.1+ 12.1+ 7+ 4.4

5.實例

  1. 給一個塊級元素添加 flex 屬性 ，讓其子元素平均分配空間。
<div class="demo">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>

.demo{
    display:flex;
    width:200px;
    height:60x;
    line-height:60px;
    border: 1px solid #ccc;
    border-right: none;
}
div>.item{
    width:100px;
    border-right:1px solid #ccc;
    text-align: center;
    flex:1;
}

效果圖

圖片描述

塊級元素平均分配空間
實例演示
預(yù)覽 復(fù)制
復(fù)制成功！
<!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>
    <style>
    .demo{
	    display:flex;
	    width:200px;
	    height:60x;
	    line-height:60px;
	    border: 1px solid #ccc;
	    border-right: none;
	}
	div>.item{
	    width:100px;
	    border-right:1px solid #ccc;
	    text-align: center;
	    flex:1;
	}
    </style>
    <body>
    <div class="demo">
	    <div class="item">1</div>
	    <div class="item">2</div>
	    <div class="item">3</div>
	</div>	
    </body>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

解釋：容器 demo 設(shè)置了 flex 總寬度為200px，項目 item 設(shè)置寬度 100px；如果正常情況下會超出容器，我們通過設(shè)置 flex:1 讓項目自適應(yīng)容器，并等分了空間。

  1. 給一個塊級元素添加 inline-flex 屬性,讓其變成行內(nèi)元素，子元素平均分配
.demo{
    display:inline-flex;
    width:200px;
    height:60x;
    line-height:60px;
    border: 1px solid #ccc;
    border-right: none;
}
div>.item{
    width:100px;
    border-right:1px solid #ccc;
    text-align: center;
    flex:1;
}

效果圖

圖片描述

內(nèi)聯(lián)元素平分空間效果圖
實例演示
預(yù)覽 復(fù)制
復(fù)制成功！
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
	.demo{
    display:inline-flex;
    width:200px;
    height:60x;
    line-height:60px;
    border: 1px solid #ccc;
    border-right: none;
}
div>.item{
    width:100px;
    border-right:1px solid #ccc;
    text-align: center;
    flex:1;
}
	</style>
</head>
<body>
     <div class="demo">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
    慕課
</body>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

demo和文字在一行，demo變成內(nèi)聯(lián)元素了。

  1. 一個左側(cè)100px，右側(cè)自適應(yīng)的，左右布局
    <div class="demo-2">
        <div class="item-left">1</div>
        <div class="item-right">2</div>
    </div>

.demo-2{
    display:flex;
}
.item-left{
    flex-basis: 100px;
}
.item-right{
    flex-grow:1;
}

效果圖

圖片描述

左側(cè)100px，右側(cè)自適應(yīng)的，左右布局效果圖
實例演示
預(yù)覽 復(fù)制
復(fù)制成功！
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    .demo-2{
    display:flex;
}
.item-left{
    flex-basis: 100px;
}
.item-right{
    flex-grow:1;
}
    </style>
</head>
<body>
    <div class="demo-2">
        <div class="item-left">1</div>
        <div class="item-right">2</div>
    </div>
</body>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

4.一個左側(cè)為100px，右側(cè)最大為600px的左右布局

.demo-2{
    display:flex;
}
.item-left{       
    flex-basis: 100px;
    background: red;
    flex-shrink:0;
}
.item-right{        
    flex-basis: 600px;
    background: yellow;
}

圖片描述

左右布局
實例演示
預(yù)覽 復(fù)制
復(fù)制成功！
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
		.demo-2{
    display:flex;
}
.item-left{       
    flex-basis: 100px;
    background: red;
    flex-shrink:0;
}
.item-right{        
    flex-basis: 600px;
    background: yellow;
}
	</style>
</head>
<body>
    <div class="demo-2">
        <div class="item-left">
1
        </div>
        <div class="item-right">
2
        </div>
    </div>
</body>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

解釋：右側(cè)最大寬度為600，如果小于 600 右側(cè)將隨屏幕尺寸縮小。

6. 經(jīng)驗分享

現(xiàn)在的很多前端開發(fā)都會接到一些設(shè)計稿，要求在各種終端都可以適應(yīng)，那么用好 flex 是一個關(guān)鍵。 flex:1 是其中最常見的設(shè)置,它等價于：

.demo{
    flex-grow:1;
    flex-shrink:1;
    flex-basis:auto
}

其意思就是剩余空間就擴大，而剩余空間不足就縮小，就像彈簧一樣。那么這部分就可以自適應(yīng)各種屏幕大小了。

7. Tips

  1. flex-basis 和 flex-grow 同時使用時候 flex-basis 不起作用。

  2. flex 的屬性 默認(rèn)是 0 1 auto，它們的順序是 flex-grow flex-shrink 和 flex-basis 即三不：有剩余空間不擴大、當(dāng)空間不足時縮小、不限制尺寸。

  3. flex 屬性有兩個快捷值 即 auto（ 1 1 auto）和 none（0 0 auto）。

  4. 盡量不要使用縮小，因為它的兼容性不是很好。