Skip to content
Taro 跨端的flexbox布局案例
TypeScript Objective-C CSS JavaScript Java HTML Other
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
asset feat: uniform size of picture Sep 24, 2019
flexbox-demo
taro-native-shell
.gitignore
README.md fix: doc Sep 24, 2019
package.json

README.md

TARO FlexBox 测试项目

Taro 跨端样式方案

关于 Flex 布局

2009年,W3C 提出了一种新的方案--Flex 布局,可以简便、完整、响应式地实现各种页面布局,且在除了 IE 之外的浏览器上都表现良好。

CanIUseFlexBox

Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为 Flex 布局。

.flex-container {
  display: -webkit-flex; /* Safari */
  display: flex;
}

行内元素也可以使用 Flex 布局。

.flex-container {
  display: -webkit-inline-flex; /* Safari */
  display: inline-flex;
}

安装并编译项目

// 克隆项目
git clone https://github.com/ZakaryCode/taro-flexbox.git

// 进入项目目录
cd taro-flexbox/flexbox-demo

// 安装依赖
yarn install

// 编译项目
yarn build

适配平台

  • 微信小程序 weapp
  • 智能小程序 swan
  • 阿里小程序 alipay
  • 头条小程序 tt
  • h5
  • rn
  • QQ轻应用 qq
  • 快应用 quickapp

预览效果

weapp swan alipay qq
weapp swan alipay qq
Web tt iOS Android
web tt ios android
You can’t perform that action at this time.