flex布局中使用flex-wrap實現(xiàn)換行的項目實踐

最近做個項目,其中有個樣式是換行布局,作為樣式渣渣的我一開始不會,只能查資料,然后擺平了它.今天得空了,簡要記錄一下,方便后面小伙伴布局使用.
參考資料 flex-wrap
開始樣式
<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 實現(xiàn)換行
<style> .planWrap { width: 160px; height: 200px; border: 1px solid; display:flex; flex-wrap: wrap; } </style>
說明:
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>
通過flex-direction
指定排列方向,flex-wrap
制定是否換行;不過這樣寫多少有點麻煩,可以使用flex-flow
來進(jìn)行簡寫
// 第一個指定的值為 flex-direction ,第二個指定的值為 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個一行變?yōu)?個一行
現(xiàn)在我不僅希望能換行,我還希望能2個一行
.planWrap { width: 160px; height: 200px; border: 1px solid; display:flex; flex-flow:row wrap; } .planItem { flex: 50%; }
這里面使用了flex屬性,flex可以指定元素占據(jù)的百分比或者固定寬度,具體可以見上面文檔,就不詳細(xì)說明了.
nth-child 指定一些元素特定屬性
現(xiàn)在我希望兩個div直接間距10px,但是后面一個元素沒有間距
.planItem { flex: 40%; margin-right: 10px; } .planItem:nth-child(2n) { margin-right: 0px; }
首先指定了margin-right
,所以我將flex
百分比調(diào)小,然后使用了nth-child
修改偶數(shù)位的元素.
完事的結(jié)束語 ^ _ ^
到此這篇關(guān)于flex布局中使用flex-wrap實現(xiàn)換行的項目實踐的文章就介紹到這了,更多相關(guān)flex-wrap實現(xiàn)換行內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
相關(guān)文章
flex布局換行空白間隙之a(chǎn)lign-content的使用
這篇文章主要介紹了flex布局換行空白間隙之a(chǎn)lign-content的使用,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編2020-07-21解決display:flex屬性 justify-content: space-between換行后的排版問
這篇文章主要介紹了解決display:flex屬性 justify-content: space-between換行后的排版問題 ,需要的朋友可以參考下2019-05-17