flex 彈性盒子display:flex 和接下來(lái)我們介紹的這個(gè) flex 是有區(qū)別的，前者是修改display實(shí)現(xiàn)彈性和模型的，而 flex 僅僅是彈性盒模型下 flex-grow、flex-shrink 和 flex-basis三個(gè)的縮寫(xiě)屬性，用來(lái)定義和模型內(nèi)部的子元素在瀏覽器重的展示形式。 下面我們主要講這三個(gè)屬性。 1. 官方定義屬性用于設(shè)置或檢索彈性盒模型對(duì)象的子元素如何分配空間。 2. 解釋fl父元素設(shè)置成 dispaly：flex 之后子元素的空間分配通過(guò) flex 設(shè)置，其特點(diǎn)為彈性，即內(nèi)部分配空間如果按照比例分配則其不會(huì)隨著父元尺寸變化而變化。 3. 語(yǔ)法子元素 {
flex: flex-grow flex-shrink flex-basis|auto|initial|inherit|none;
}屬性說(shuō)明
4. 兼容性flex:
flex-grow| flex-shrink|flex-basis:
5.實(shí)例
<div class="demo"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div> .demo{
display:flex;
width:px;
height:x;
line-height:px;
border: px solid #ccc;
border-right: none;
}
div>.item{
width:px;
border-right:px solid #ccc;
text-align: center;
flex:;
}效果圖
<!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:px;
height:x;
line-height:px;
border: px solid #ccc;
border-right: none;
}
div>.item{
width:px;
border-right:px solid #ccc;
text-align: center;
flex:;
}
</style>
<body>
<div class="demo">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>解釋?zhuān)喝萜?demo 設(shè)置了 flex 總寬度為200px，項(xiàng)目 item 設(shè)置寬度 100px；如果正常情況下會(huì)超出容器，我們通過(guò)設(shè)置 flex:1 讓項(xiàng)目自適應(yīng)容器，并等分了空間。
.demo{
display:inline-flex;
width:px;
height:x;
line-height:px;
border: px solid #ccc;
border-right: none;
}
div>.item{
width:px;
border-right:px solid #ccc;
text-align: center;
flex:;
}效果圖
<!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:px;
height:x;
line-height:px;
border: px solid #ccc;
border-right: none;
}
div>.item{
width:px;
border-right:px solid #ccc;
text-align: center;
flex:;
}
</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)元素了。
<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: px;
}
.item-right{
flex-grow:;
}效果圖
<!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: px;
}
.item-right{
flex-grow:;
}
</style>
</head>
<body>
<div class="demo-2">
<div class="item-left">1</div>
<div class="item-right">2</div>
</div>
</body>
</html>4.一個(gè)左側(cè)為100px，右側(cè)最大為600px的左右布局 .demo-2{
display:flex;
}
.item-left{
flex-basis: px;
background: red;
flex-shrink:;
}
.item-right{
flex-basis: px;
background: yellow;
}
<!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: px;
background: red;
flex-shrink:;
}
.item-right{
flex-basis: px;
background: yellow;
}
</style>
</head>
<body>
<div class="demo-2">
<div class="item-left">
1
</div>
<div class="item-right">
2
</div>
</div>
</body>
</html>解釋?zhuān)河覀?cè)最大寬度為600，如果小于 600 右側(cè)將隨屏幕尺寸縮小。 6. 經(jīng)驗(yàn)分享現(xiàn)在的很多前端開(kāi)發(fā)都會(huì)接到一些設(shè)計(jì)稿，要求在各種終端都可以適應(yīng)，那么用好 flex 是一個(gè)關(guān)鍵。 flex:1 是其中最常見(jiàn)的設(shè)置,它等價(jià)于： .demo{
flex-grow:;
flex-shrink:;
flex-basis:auto
}其意思就是剩余空間就擴(kuò)大，而剩余空間不足就縮小，就像彈簧一樣。那么這部分就可以自適應(yīng)各種屏幕大小了。 7. Tips
|
