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

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

flex-wrap 屬性

flex-wrap 屬性用于指定彈性盒子的子元素換行方式。

語法

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

各個值解析:

nowrap - 默認， 彈性容器為單行。該情況下彈性子項可能會溢出容器。

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

wrap-reverse -反轉 wrap 排列。

以下實例演示了 nowrap 的使用:

實例

.flex-container {

display: -webkit-flex;

display: flex;

-webkit-flex-wrap: nowrap;

flex-wrap: nowrap;

width: 300px;

height: 250px;

background-color: lightgrey;

}

以下實例演示了 wrap 的使用:

實例

.flex-container {

display: -webkit-flex;

display: flex;

-webkit-flex-wrap: wrap;

flex-wrap: wrap;

width: 300px;

height: 250px;

background-color: lightgrey;

}

以下實例演示了 wrap-reverse 的使用:

實例

.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屬性怎么用”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享標題：css中的flex-wrap屬性怎么用
本文來源：http://www.chinadenli.net/article18/pieodp.html

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

廣告

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