flex布局中使用flex-wrap實(shí)現(xiàn)換行的項(xiàng)目實(shí)踐
我要評(píng)論最近做個(gè)項(xiàng)目,其中有個(gè)樣式是換行布局,作為樣式渣渣的我一開(kāi)始不會(huì),只能查資料,然后擺平了它.今天得空了,簡(jiǎn)要記錄一下,方便后面小伙伴布局使用.
參考資料 flex-wrap
開(kāi)始樣式
<div class="planWrap">
<div class="content planItem">1</div>
<div class="content planItem">2</div>
<div class="content planItem">3</div>
<div class="content planItem">4</div>
<div class="content planItem">5</div>
<div class="content planItem">6</div>
</div>
<style>
.content {
background: red;
line-height:50px;
height: 50px;
width: 50px;
text-align: center;
margin-top:5px
}
.planWrap {
width: 160px;
height: 200px;
border: 1px solid;
display:flex;
}
</style>
flex-wrap 實(shí)現(xiàn)換行
<style>
.planWrap {
width: 160px;
height: 200px;
border: 1px solid;
display:flex;
flex-wrap: wrap;
}
</style>
說(shuō)明:
1.flex-wrap 屬性指定 flex 元素單行顯示還是多行顯示,該屬性接受以下取值:
- nowrap: 元素都放在一行,也是默認(rèn)屬性值;
- wrap:元素放到多行;
- wrap-reverse: 和 wrap 的行為一樣，但是 cross-start 和 cross-end 互換。(如下圖展示更直觀)
2.上面有提及wrap-reverse,展示一下wrap-reverse的樣式
<style>
.planWrap {
width: 160px;
height: 200px;
border: 1px solid;
display:flex;
flex-wrap: wrap-reverse;
}
</style>
垂直換行 flex-flow
上面的都是行分布,現(xiàn)在我想要垂直分布且換行
<style>
.planWrap {
width: 160px;
height: 200px;
border: 1px solid;
display:flex;
flex-wrap: wrap;
flex-direction: column;
}
</style>
通過(guò)flex-direction指定排列方向,flex-wrap制定是否換行;不過(guò)這樣寫(xiě)多少有點(diǎn)麻煩,可以使用flex-flow來(lái)進(jìn)行簡(jiǎn)寫(xiě)
// 第一個(gè)指定的值為 flex-direction ，第二個(gè)指定的值為 flex-wrap. flex-flow: flex-direction flex-wrap
<style>
.planWrap {
width: 160px;
height: 200px;
border: 1px solid;
display:flex;
flex-flow:column wrap;
}
</style>
3個(gè)一行變?yōu)?個(gè)一行
現(xiàn)在我不僅希望能換行,我還希望能2個(gè)一行
.planWrap {
width: 160px;
height: 200px;
border: 1px solid;
display:flex;
flex-flow:row wrap;
}
.planItem {
flex: 50%;
}
這里面使用了flex屬性,flex可以指定元素占據(jù)的百分比或者固定寬度,具體可以見(jiàn)上面文檔,就不詳細(xì)說(shuō)明了.
nth-child 指定一些元素特定屬性
現(xiàn)在我希望兩個(gè)div直接間距10px,但是后面一個(gè)元素沒(méi)有間距
.planItem {
flex: 40%;
margin-right: 10px;
}
.planItem:nth-child(2n) {
margin-right: 0px;
}
首先指定了margin-right,所以我將flex百分比調(diào)小,然后使用了nth-child修改偶數(shù)位的元素.
完事的結(jié)束語(yǔ) ^ _ ^
到此這篇關(guān)于flex布局中使用flex-wrap實(shí)現(xiàn)換行的項(xiàng)目實(shí)踐的文章就介紹到這了,更多相關(guān)flex-wrap實(shí)現(xiàn)換行內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
flex布局換行空白間隙之a(chǎn)lign-content的使用
這篇文章主要介紹了flex布局換行空白間隙之a(chǎn)lign-content的使用,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編2020-07-21解決display:flex屬性 justify-content: space-between換行后的排版問(wèn)
這篇文章主要介紹了解決display:flex屬性 justify-content: space-between換行后的排版問(wèn)題 ,需要的朋友可以參考下2019-05-17