css中的flex-wrap屬性怎么用

這篇文章主要為大家展示了“css中的flex-wrap屬性怎么用”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“css中的flex-wrap屬性怎么用”這篇文章吧。

　　flex-wrap 屬性

　　flex-wrap 屬性用于指定彈性盒子的子元素?fù)Q行方式。

　　語(yǔ)法

　　flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

　　各個(gè)值解析:

　　nowrap - 默認(rèn)， 彈性容器為單行。該情況下彈性子項(xiàng)可能會(huì)溢出容器。

　　wrap - 彈性容器為多行。該情況下彈性子項(xiàng)溢出的部分會(huì)被放置到新行，子項(xiàng)內(nèi)部會(huì)發(fā)生斷行

　　wrap-reverse -反轉(zhuǎn) wrap 排列。

　　以下實(shí)例演示了 nowrap 的使用:

　　實(shí)例

　　.flex-container {

　　display: -webkit-flex;

　　display: flex;

　　-webkit-flex-wrap: nowrap;

　　flex-wrap: nowrap;

　　width: 300px;

　　height: 250px;

　　background-color: lightgrey;

　　}

　　以下實(shí)例演示了 wrap 的使用:

　　實(shí)例

　　.flex-container {

　　display: -webkit-flex;

　　display: flex;

　　-webkit-flex-wrap: wrap;

　　flex-wrap: wrap;

　　width: 300px;

　　height: 250px;

　　background-color: lightgrey;

　　}

　　以下實(shí)例演示了 wrap-reverse 的使用:

　　實(shí)例

　　.flex-container {

　　display: -webkit-flex;

　　display: flex;

　　-webkit-flex-wrap: wrap-reverse;

　　flex-wrap: wrap-reverse;

　　width: 300px;

　　height: 250px;

　　background-color: lightgrey;

　　}

以上是“css中的flex-wrap屬性怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！