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ǎ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)目的行為。以下是一些常用的屬性：
display: 定義一個(gè)容器是flex或inline-flex布局。
justify-content: 用來(lái)定義項(xiàng)目在主軸上的對(duì)齊方式，可以設(shè)置的值包括：flex-start, flex-end, center, space-between, space-around。
align-items: 用來(lái)定義項(xiàng)目在交叉軸上的對(duì)齊方式，可以設(shè)置的值包括：flex-start, flex-end, center, baseline, stretch。
flex-direction: 用來(lái)定義主軸的方向，可以設(shè)置的值包括：row, row-reverse, column, column-reverse。
flex-wrap: 用來(lái)定義多行排列時(shí)，是否換行，可以設(shè)置的值包括：nowrap, wrap, wrap-reverse。
align-content: 用來(lái)定義多行排列間的對(duì)齊方式，可以設(shè)置的值包括：flex-start, flex-end, center, space-between, space-around, stretch。
flex: 項(xiàng)目的綜合屬性，包括flex-grow, flex-shrink, flex-basis三個(gè)屬性，用來(lái)控制項(xiàng)目在容器中的尺寸和自適應(yīng)性。
除了以上屬性外，F(xiàn)lexbox還提供了一些其他的屬性，如order、align-self、flex-flow等，用于更加細(xì)致地控制項(xiàng)目的排列和布局。
圖片解析：
Flex彈性布局具有以下特點(diǎn)：
容器內(nèi)的項(xiàng)目可以沿著主軸和交叉軸自由排列，控制項(xiàng)目的排列和布局非常靈活。
容器的尺寸可以根據(jù)其中的項(xiàng)目自適應(yīng)變化，適用于響應(yīng)式設(shè)計(jì)。
可以控制項(xiàng)目在主軸和交叉軸上的對(duì)齊方式，適用于排版和布局。
可以通過簡(jiǎn)單的屬性和值的組合實(shí)現(xiàn)復(fù)雜的布局。
支持多行排列，可以用來(lái)實(shí)現(xiàn)柵格布局等網(wǎng)頁(yè)布局方案。
可以通過flex-grow、flex-shrink、flex-basis等屬性控制項(xiàng)目的尺寸和自適應(yīng)性。
總之，F(xiàn)lex彈性布局是現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)中非常流行的一種布局方式，具有強(qiáng)大的控制能力和靈活的布局特性，可以幫助開發(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)聽頁(yè)面加載
*/
onLoad(options) {
this.loadSwiperImgs()
},
/**
* 生命周期函數(shù)--監(jiān)聽頁(yè)面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁(yè)面顯示
*/
onShow() {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁(yè)面隱藏
*/
onHide() {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁(yè)面卸載
*/
onUnload() {
},
/**
* 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(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>
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-713662.html
?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;
}
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-713662.html
到了這里，關(guān)于微信小程序會(huì)議OA系統(tǒng)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
