位置：首頁(yè) > 軟件操作教程 > 編程開(kāi)發(fā) > CSS > 問(wèn)題詳情

CSS3 對(duì)父級(jí)容器的設(shè)置 4.flex-wrap

提問(wèn)人：劉團(tuán)圓發(fā)布時(shí)間：2020-11-19

    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>

image.png

繼續(xù)查找其他問(wèn)題的答案？

相關(guān)視頻回答
回復(fù)(0)
返回頂部