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>
點(diǎn)擊加載更多評論>>