微信小程序:flex常用布局

在我们平时微信小程序开发过程中为了页面能达到设计小伙伴的预期,追求还原度,那我们肯定会使用很多常用的布局方式,那我们今天就介绍一下微信小程序中常用的一些flex布局

1、常用flex布局

复制代码
/** 水平垂直居中 **/
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/** 纵向依次排列 **/
.direction-column {
  flex-direction: column;
}

/** 平分,一左一右排列 **/
.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/** 从左往右垂直居中依次排列 **/
.flex-start {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

/** 从右往左垂直居中依次排列 **/
.flex-end {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/** 从左往右依次排列,底部(基线)对齐 **/
.flex-start-base {
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
}

2、其它布局

order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0

复制代码
.item{
  order: <integer>;
}

flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。

复制代码
.item {
  flex-grow: <number>; /* default 0 */
}

flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

复制代码
.item {
  flex-shrink: <number>; /* default 1 */
}
相关推荐
從南走到北2 小时前
JAVA代泊车接机送机服务代客泊车系统源码支持小程序+APP+H5
java·开发语言·微信小程序·小程序
木易 士心7 小时前
组织架构树形选择组件使用说明(Vue3 + UniApp)
微信小程序·钉钉·notepad++
软件技术员9 小时前
微信小程序电子测宅堪墓风水罗盘
微信小程序·小程序
future_studio9 小时前
聊聊 Unity(小白专享、C# 小程序 之 播放器)
unity·小程序·c#
Q_Q5110082859 小时前
python+uniapp基于微信小程序的旅游信息系统
spring boot·python·微信小程序·django·flask·uni-app·node.js
小Tomkk10 小时前
Rokid 开发空间小程序 实战
3d·小程序·rokid·jsar
说私域10 小时前
基于多模态AI技术的传统行业智能化升级路径研究——以开源AI大模型、AI智能名片与S2B2C商城小程序为例
人工智能·小程序·开源
2501_9160074711 小时前
iOS 混淆工具链实战,多工具组合完成 IPA 混淆与加固(iOS混淆|IPA加固|无源码混淆|App 防反编译)
android·ios·小程序·https·uni-app·iphone·webview
游戏开发爱好者813 小时前
FTP 抓包分析实战,命令、被动主动模式要点、FTPS 与 SFTP 区别及真机取证流程
运维·服务器·网络·ios·小程序·uni-app·iphone
努力就够了13 小时前
微信小程序:日常零售供应系统
微信小程序·erp·接单·零售系统