欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

  發(fā)布時間：2022-06-16 17:01:15   作者：蔡姐   我要評論
最近需要做個換行的布局，本文主要介紹了flex布局中使用flex-wrap實現(xiàn)換行的項目實踐，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

最近做個項目,其中有個樣式是換行布局,作為樣式渣渣的我一開始不會,只能查資料,然后擺平了它.今天得空了,簡要記錄一下,方便后面小伙伴布局使用.

參考資料 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

簡寫屬性 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)?個一行

Flex屬性的簡寫

現(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)文章

最新評論