Flex是Flexible Box的缩写，意味着：灵活布局、弹性布局。
任何一个容器均可指定为Flex布局。display:flex;
行内元素也可以使用Flex布局。display:inline-flex;
采用Flex布局的元素，称为Flex容器，简称容器。
它的所有子元素自动成为容器成员，称为Flex项目，简称项目。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
/* pages/firends.wxss */
image {
width: 100rpx;
height: 100rpx;
}
.menu {
display: flex;
/* 规定主轴方向 row：水平；*/
flex-direction: row;
/* 规定元素在主軸方向展示方式 */
justify-content: space-around;
/* 在副轴方向如何展示 */
/* align-items: flex-end; */
}
.menu .item {
display: flex;
/* 规定主轴方向 column：垂直；*/
flex-direction: column;
align-items: center;
}
1.1 添加图片文件夹（存放tabbar图片）
1.2 添加4个page页面，分别是（首页：index，消息：message，购物：cart，用户：myInfo）
1.3 app.json
检查pages项：主要是查看添加的page页是否添加管理到Pages下，
配置tabBar项：selectedColor:设置选中后的文本颜色，list项设置每一个模块的配置，
修改window项：设置标题
{
"pages": [
"pages/index/index",
"pages/message/message",
"pages/shopping/shopping",
"pages/myInfo/myInfo",
"pages/logs/logs"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "逃宝",
"navigationBarTextStyle": "black"
},
"tabBar": {
"selectedColor": "#FFCC33",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "/static/tabbar/shouye.png",
"selectedIconPath": "/static/tabbar/shouyefill.png"
},
{
"pagePath": "pages/message/message",
"text": "消息",
"iconPath": "/static/tabbar/xinxi.png",
"selectedIconPath": "/static/tabbar/xinxifill.png"
},
{
"pagePath": "pages/shopping/shopping",
"text": "购物",
"iconPath": "/static/tabbar/cart.png",
"selectedIconPath": "/static/tabbar/cart_hover.png"
},
{
"pagePath": "pages/myInfo/myInfo",
"text": "用户",
"iconPath": "/static/tabbar/yonghu.png",
"selectedIconPath": "/static/tabbar/yonghufill.png"
}
]
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
前台页面的设置：主要用于设置元素
前台页面的css设置，用于设置页面元素的布局
/**index.wxss**/
.header{
display: flex;
flex-direction: row;
justify-content: space-around;
}
.header .icon image {
width: 100rpx;
height: 100rpx;
}
.header .icon{
display:flex;
flex-direction: column;
align-items: center;
}
.content{
margin-top: 20rpx;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.content .guobao image {
width: 350rpx;
height: 400rpx;
margin: 10rpx 10rpx 10rpx 10rpx;
}
.content .guobao{
display:flex;
flex-direction: row;
align-items: center;
}
.content .guobao .guobaoOwner{
display:flex;
flex-direction: row;
justify-content: space-between;
/* 设置view相关的 */
background-color: rgba(0, 0, 0, 0.618);
position:absolute;
width: 350rpx;
height: 80rpx;
margin: -80rpx 10rpx 10rpx 10rpx;
/* 设置字体相关的 */
color: white;
font-size:medium;
line-height:80rpx ; /*字体居中*/
}
.content .guobao .guobaoOwner image{
width: 40rpx;
height: 40rpx;
vertical-align: middle; /*图片居中*/
}
效果展示
消息页面html的设置：主要用于设置元素
消息页面的css设置，用于设置页面元素的布局
/* pages/message.wxss */
.header {
width: 100%;
position: fixed;
background-color:black;
color: white;
}
.headerContent{
display: flex;
flex-direction: row;
justify-content: space-around;
}
.header image {
width: 100rpx;
height: 100rpx;
}
.headerContent .item{
display: flex;
flex-direction: column;
align-items: center;
}
.container{
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: space-around;
}
.container image {
width: 100rpx;
height: 100rpx;
}
.container .message {
width: 750rpx;
display: flex;
flex-direction: row;
justify-content:start;
}
.messageContent .messageTop{
width: 650rpx;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.container .message .messageContent .msgSendTime{
margin-right: 10rpx;
}
.container .message .messageContent .messageBottom{
/*单行文本超出*/
width: auto;
display: -webkit-box; /*设置为弹性盒子*/
-webkit-line-clamp: 1;/*最多显示1行数据*/
overflow: hidden; /*超出备份隐藏*/
text-overflow: ellipsis; /*超出显示为省略号*/
-webkit-box-orient: vertical;
word-break: break-all;
}
效果展示
购物页面html的设置：主要用于设置元素
甘肃博物馆 马踏飞燕
湖南博物馆 越王勾践剑
购物页面的css设置，用于设置页面元素的布局
/* pages/shopping/shopping.wxss */
.shopping{
margin: 0rpx 10rpx 50rpx 10rpx;
display: flex;
flex-direction: column;
justify-content:space-around;
}
.shopping .title{
font-size: 40rpx;
font-weight: 800;
}
.shopping .watch{
display: flex;
flex-direction: row;
justify-content:space-between;
}
.shopping .watch .watch_status{
background-color: darkturquoise;
margin: 10rpx 10rpx 10rpx 10rpx;
border-radius: 30rpx;
color: white;
width: 150rpx;
text-align: center;
}
.shopping .watch .watch_nums{
margin: 10rpx 10rpx 10rpx 10rpx;
font-weight:100;
font-size: 35rpx;
}
.shopping .main_pic image{
margin: 10rpx 10rpx 10rpx 10rpx;
}
.shopping .detail_pic image{
height: 200rpx;
width: 200rpx;
}
.shopping .detail_pic{
display: flex;
flex-direction: row;
}
.shopping .detail_pic image{
margin: 10rpx 5rpx 10rpx 5rpx;
}
效果展示
用户页面html的设置：主要用于设置元素
用户页面的css设置，用于设置页面元素的布局
/* pages/myInfo/myInfo.wxss */
.header{
background-color: turquoise;
display: flex;
flex-direction: column;
justify-content:space-around;
color: white;
margin-bottom: 20rpx;
}
.header .top{
display: flex;
flex-direction: row;
justify-content: space-between;
}
.header .top image{
width: 100rpx;
height: 100rpx;
vertical-align: middle;
}
.header .top .user_pic{
margin:20rpx 10rpx 20rpx 30rpx;
align-items: center;
justify-content: center;
}
.header .top .seeme{
background-color: teal;
height: 80rpx;
width: 300rpx;
margin: 50rpx 20rpx;
line-height: 80rpx;
text-align: center;
border-radius: 30rpx 0rpx 0rpx 30rpx ;
}
.header .top .user_pic text{
line-height: 150rpx;
margin:0rpx 10rpx 20rpx 10rpx;
align-items: center;
justify-content: center;
}
.header .bottom{
display: flex;
flex-direction: row;
justify-content:space-around;
margin-bottom: 50rpx;
}
.header .bottom .item{
display: flex;
flex-direction: column;
justify-content:space-around;
align-items: center;
}
.content{
margin-top:60rpx;
}
.content .contentList {
display: flex;
flex-direction: row;
justify-content: space-around;
}
.content .contentList .item{
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.content .contentList .item image{
width: 80rpx;
height: 80rpx;
}
.content .mycontent {
margin-top: 100rpx;
border-top:10rpx solid darkgrey;
}
.content .mycontent .my_content_title{
font-size: 39rpx;
font-weight: 600;
}
.content .mycontent .item{
height: 100rpx;
margin: 50rpx 30rpx 50rpx 30rpx;
border-bottom:4rpx solid rgb(169, 169, 169);
display: flex;
flex-direction: row;
justify-content: space-between;
}
.content .mycontent .my_content_detail{
font-size: 35rpx;
font-weight: 200;
}
.footer {
margin: 100rpx 0 100rpx 0;
display: flex;
flex-direction: row;
justify-content: space-around;
}
.footer .item{
border: 4rpx solid rgb(169, 169, 169);
border-radius: 20rpx;
padding: 10rpx 10rpx 10rpx 10rpx;
height: 50rpx;
line-height: 50rpx;
text-align: center;
}
.footer_item_text{
margin-left: 10rpx;
}
.footer image {
height: 50rpx;
width: 50rpx;
vertical-align: middle;
}
效果展示
至此，静态页面设置完成，相关源码：https://github.com/1692134188/HelloWechat_Flex.git
京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有