css中的flex-wrap屬性怎么用

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

創(chuàng)新互聯(lián)為企業(yè)提供：品牌網(wǎng)站設(shè)計(jì)、網(wǎng)絡(luò)營銷策劃、微信小程序、營銷型網(wǎng)站建設(shè)和網(wǎng)站運(yùn)營托管，一站式網(wǎng)絡(luò)營銷整體服務(wù)。實(shí)現(xiàn)不斷獲取潛在客戶之核心目標(biāo)，建立了企業(yè)專屬的“全網(wǎng)營銷推廣”，就用不著再為了獲取潛在客戶而苦惱，相反，客戶會(huì)主動(dòng)找您，生意就找上門來了！

flex-wrap 屬性

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

語法

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)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享標(biāo)題：css中的flex-wrap屬性怎么用
本文來源：http://muchs.cn/article18/pieodp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、Google、品牌網(wǎng)站建設(shè)、微信公眾號(hào)、面包屑導(dǎo)航、ChatGPT

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)