CSS3 對子級元素的設(shè)置 1. flex
flex屬性用于設(shè)置或檢索彈性盒模型對象的子元素如何分配空間。flex屬性是flex-grow、flex-shrink和flex-basis屬性的簡寫屬性。
語法如下:
ilex: flex-grow flex-ishrink ilex-basis | auto | initial | inherit；
flex屬性的值可以是以下幾種：
? flex-grow: 一個(gè)數(shù)字，規(guī)定項(xiàng)目將相對于其他靈活的項(xiàng)目進(jìn)行擴(kuò)展的量。
? flex-shrink：一個(gè)數(shù)字，規(guī)定項(xiàng)目將相對于其他靈活的項(xiàng)目進(jìn)行收縮的量。
? flex-basis：項(xiàng)目的長度。合法值為auto、inherit,也可以是一個(gè)后跟％、px、em或任何其 他長度單位的數(shù)字。
? auto： 11 auto相同。
? none：與0 0 auto相同。
? initial：設(shè)置該屬性為它的默認(rèn)值，即為01 auto。 o inherit：從父元素繼承該屬性。
下面通過實(shí)例來理解flex屬性。
【例題】使用flex屬性
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.container{
width: 500px;
height: 500px;
border:5px red solid;
display:flex;
/*justify-content: space-around;*/
flex-wrap: wrap;
}
.content{
height: 100%;
background: lightpink;
color:#fff;
font-size: 50px;
text-align: center;
line-height: 100px;
flex: 1;
}
.c2{
background: lightblue;
}
.c3{
background: yellowgreen
}
</style>
</head>
<body>
<div>
<div class="content c1">1</div>
<div class="content c2">2</div>
<div class="content c3">3</div>
<div class="content c4">45678910</div>
</div>
</body>
</html>
湘公網(wǎng)安備:43011102000856號 
點(diǎn)擊加載更多評論>>