CSS3 對(duì)父級(jí)容器的設(shè)置 4.flex-wrap
flex-wrap屬性規(guī)定flex容器是單行或者多行,同時(shí)橫軸的方向決定了新行堆疊的方向。
語(yǔ)法如下:
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit:
flex-wrap屬性的值可以是以下幾種:
?nowrap:默認(rèn),彈性容器為單行,該情況下彈性子頂可能會(huì)溢出容器。
?wrap:彈性容器為多行,該情況下彈性子項(xiàng)溢出的部分會(huì)被放置到新行,子項(xiàng)內(nèi)部會(huì)發(fā)生斷行。
?wrap-reverse:反車專wrap排列。
? initial:設(shè)置該屬性為它的默認(rèn)值。 o inherit:從父元素繼承該屬性。
下面通過(guò)實(shí)例來(lái)理解flex~wrap屬性。
【例題】使用flex-wrap屬性
代碼如下:
<!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{
width: 100px;
height: 100px;
background: lightpink;
color:#fff;
font-size: 50px;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
</body>
</html>
點(diǎn)擊加載更多評(píng)論>>