Flex彈性布局

Flex彈性布局是一種 CSS3 的布局模式，也叫Flexbox。它可以讓容器中的元素按一定比例自動(dòng)分配空間，使得它們?cè)诓煌瑢挾?、高度等情況下仍能保持整齊和密集不間隙地排列。

在使用Flexbox彈性布局時(shí)，首先需要?jiǎng)?chuàng)建一個(gè)容器和若干個(gè)子元素。容器的屬性display需要設(shè)置為flex或inline-flex以啟用Flexbox布局。而子元素的屬性則需要使用彈性屬性，如flex-grow、flex-shrink、flex-basis等來(lái)控制它們的自適應(yīng)性和布局方式。

Flexbox彈性布局的優(yōu)點(diǎn)在于它可以輕松處理不同屏幕尺寸和方向的布局問(wèn)題，使得網(wǎng)頁(yè)設(shè)計(jì)更加靈活和自適應(yīng)。同時(shí)，它也可以很好地結(jié)合其他CSS屬性和技術(shù)，如媒體查詢、響應(yīng)式圖片等，來(lái)實(shí)現(xiàn)更加豐富和復(fù)雜的網(wǎng)頁(yè)設(shè)計(jì)效果。

Flexbox

布局的語(yǔ)法網(wǎng)站：https://www.runoob.com/w3cnote/flex-grammar.html

Flexbox提供了一系列的CSS屬性，用于控制容器和項(xiàng)目的行為。以下是一些常用的屬性：

1. display: 定義一個(gè)容器是flex或inline-flex布局。

2. justify-content: 用來(lái)定義項(xiàng)目在主軸上的對(duì)齊方式，可以設(shè)置的值包括：flex-start, flex-end, center, space-between, space-around。

3. align-items: 用來(lái)定義項(xiàng)目在交叉軸上的對(duì)齊方式，可以設(shè)置的值包括：flex-start, flex-end, center, baseline, stretch。

4. flex-direction: 用來(lái)定義主軸的方向，可以設(shè)置的值包括：row, row-reverse, column, column-reverse。

5. flex-wrap: 用來(lái)定義多行排列時(shí)，是否換行，可以設(shè)置的值包括：nowrap, wrap, wrap-reverse。

6. align-content: 用來(lái)定義多行排列間的對(duì)齊方式，可以設(shè)置的值包括：flex-start, flex-end, center, space-between, space-around, stretch。

7. flex: 項(xiàng)目的綜合屬性，包括flex-grow, flex-shrink, flex-basis三個(gè)屬性，用來(lái)控制項(xiàng)目在容器中的尺寸和自適應(yīng)性。

除了以上屬性外，Flexbox還提供了一些其他的屬性，如order、align-self、flex-flow等，用于更加細(xì)致地控制項(xiàng)目的排列和布局。

圖片解析：

Flex彈性布局具有以下特點(diǎn)：

1. 容器內(nèi)的項(xiàng)目可以沿著主軸和交叉軸自由排列，控制項(xiàng)目的排列和布局非常靈活。

2. 容器的尺寸可以根據(jù)其中的項(xiàng)目自適應(yīng)變化，適用于響應(yīng)式設(shè)計(jì)。

3. 可以控制項(xiàng)目在主軸和交叉軸上的對(duì)齊方式，適用于排版和布局。

4. 可以通過(guò)簡(jiǎn)單的屬性和值的組合實(shí)現(xiàn)復(fù)雜的布局。

5. 支持多行排列，可以用來(lái)實(shí)現(xiàn)柵格布局等網(wǎng)頁(yè)布局方案。

6. 可以通過(guò)flex-grow、flex-shrink、flex-basis等屬性控制項(xiàng)目的尺寸和自適應(yīng)性。

總之，Flex彈性布局是現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)中非常流行的一種布局方式，具有強(qiáng)大的控制能力和靈活的布局特性，可以幫助開(kāi)發(fā)者實(shí)現(xiàn)各種復(fù)雜的排版和布局需求。

flex-wrap屬性

nowrap（默認(rèn)）：不換行。

wrap：換行，第一行在上方。

wrap-reverse：換行，第一行在下方。

代碼如下

list.wxss

/* pages/vote/list/list.wxss */
.box{height: 750rpx;width: 750rpx;background-color: aquamarine;display: flex;/* flex-direction: column-reverse; */flex-wrap: wrap;/* flex-flow: row wrap; *//* justify-content: flex-end; */align-items: flex-end;
}
view{height: 180rpx;width: 100rpx;border: 1px solid red;
}

?OA會(huì)議首頁(yè)

點(diǎn)擊我們的Shift+Alt+R，選擇我們的顯示資源管理器，將我們的static靜態(tài)資源復(fù)制到存放代碼的區(qū)間中

app.json

{"pages": ["pages/index/index","pages/meeting/list/list","pages/vote/list/list","pages/ucenter/index/index","pages/logs/logs"],"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "Weixin","navigationBarTextStyle": "black"},"tabBar": {"list": [{"pagePath": "pages/index/index","text": "首頁(yè)","iconPath": "/static/tabBar/coding.png","selectedIconPath": "/static/tabBar/coding-active.png"},{"pagePath": "pages/meeting/list/list","iconPath": "/static/tabBar/sdk.png","selectedIconPath": "/static/tabBar/sdk-active.png","text": "會(huì)議"},{"pagePath": "pages/vote/list/list","iconPath": "/static/tabBar/template.png","selectedIconPath": "/static/tabBar/template-active.png","text": "投票"},{"pagePath": "pages/ucenter/index/index","iconPath": "/static/tabBar/component.png","selectedIconPath": "/static/tabBar/component-active.png","text": "設(shè)置"}]},"style": "v2","sitemapLocation": "sitemap.json"
}

index.js?

// 獲取應(yīng)用實(shí)例
const api = require("../../config/api")
// pages/meeting/list/list.js
Page({/*** 頁(yè)面的初始數(shù)據(jù)*/data: {imgSrcs:[],lists: [{"id": "1","image": "/static/persons/1.jpg","title": "對(duì)話產(chǎn)品總監(jiān) | 深圳·北京PM大會(huì) 【深度對(duì)話小米/京東/等產(chǎn)品總監(jiān)】","num":"304","state":"進(jìn)行中","starttime": "2022-03-13 00:00:00","location": "深圳市·南山區(qū)"},{"id": "1","image": "/static/persons/2.jpg","title": "AI WORLD 2016世界人工智能大會(huì)","num":"380","state":"已結(jié)束","starttime": "2022-03-15 00:00:00","location": "北京市·朝陽(yáng)區(qū)"},{"id": "1","image": "/static/persons/3.jpg","title": "H100太空商業(yè)大會(huì)","num":"500","state":"進(jìn)行中","starttime": "2022-03-13 00:00:00","location": "大連市"},{"id": "1","image": "/static/persons/4.jpg","title": "報(bào)名年度盛事，大咖云集！2016鳳凰國(guó)際論壇邀您“與世界對(duì)話”","num":"150","state":"已結(jié)束","starttime": "2022-03-13 00:00:00","location": "北京市·朝陽(yáng)區(qū)"},{"id": "1","image": "/static/persons/5.jpg","title": "新質(zhì)生活 · 品質(zhì)時(shí)代 2016消費(fèi)升級(jí)創(chuàng)新大會(huì)","num":"217","state":"進(jìn)行中","starttime": "2022-03-13 00:00:00","location": "北京市·朝陽(yáng)區(qū)"}]},/*** 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載*/onLoad(options) {
this.loadSwiperImgs()},/*** 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面初次渲染完成*/onReady() {},/*** 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示*/onShow() {},/*** 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面隱藏*/onHide() {},/*** 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面卸載*/onUnload() {},/*** 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽(tīng)用戶下拉動(dòng)作*/onPullDownRefresh() {},/*** 頁(yè)面上拉觸底事件的處理函數(shù)*/onReachBottom() {},/*** 用戶點(diǎn)擊右上角分享*/onShareAppMessage() {},loadSwiperImgs(){let that=this;wx.request({url: api.SwiperImgs,dataType: 'json',success(res) {console.log(res)that.setData({imgSrcs:res.data.images})}})}
})

?index.wxml

<!--index.wxml--><view><swiper autoplay="true" indicator-dots="true" indicator-color="#fff" indicator-active-color="#00f"><block wx:for="{{imgSrcs}}" wx:key="text"><swiper-item><view><image src="{{item.img}}" class="swiper-item" /></view></swiper-item></block></swiper>
</view>
<view class="mobi-title"><text class="mobi-icon"></text><text>會(huì)議信息</text>
</view>
<block wx:for-items="{{lists}}" wx:for-item="item" wx:key="item.id"><view class="list" data-id="{{item.id}}"><view class="list-img"><image class="video-img" mode="scaleToFill" src="{{item.image}}"></image></view><view class="list-detail"><view class="list-title"><text>{{item.title}}</text></view><view class="list-tag"><view class="state">{{item.state}}</view><view class="join"><text class="list-num">{{item.num}}</text>人報(bào)名</view></view><view class="list-info"><text>{{item.location}}</text>|<text>{{item.starttime}}</text></view></view></view>
</block>
<view class="section bottom-line"><text>到底啦</text>
</view>

?JSON

{"data": {"images":[{"img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner1.png","text": "1"},{"img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner2.png","text": "2"},{"img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner3.png","text": "3"},{"img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner4.png","text": "4"},{"img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner5.png","text": "5"},{"img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner6.png","text": "6"}
]},"statusCode": "200","header": {"content-type":"applicaiton/json;charset=utf-8"}
}

?index.wxss

page{height: 100%;background-color:#efeff4;
}
.swiper-item {height: 350rpx;width: 100%;border-radius: 10rpx;
}
.mobi-title{
font-size: 18px;
margin: 10rpx;
}
.mobi-icon{background-color: red;padding: 3rpx;
}
.mobi-title text{margin-left: 10rpx;
}
.list{
background-color: #fff;
display: flex;
margin:10rpx;
padding:10rpx;
}
.list-img,.video-img{
height: 150rpx;
width: 150rpx;
}
.list-img{margin:30rpx 0 0 0 ;
}
.list-detail{
margin:0 0 0 10rpx;
}
.list-title{
font-weight: 700;
}
.list-tag{
display: flex;
margin: 10px 0 ;
}
.state{
border: 3px  solid lightblue;
padding: 2px;
color: lightblue;
}
.join{border: 3px  solid #fff;padding: 2px;margin: 0 0 0 20rpx;color:gray;
}
.list-num{
color: red;
}
.list-info{color:gray;
}
.bottom-line{text-align: center;
margin-bottom: 10px;
}