flexbox

插件名

flexbox

安装

npm

npm install @jswork/styled-plugin-flexbox

Yarn

yarn add @jswork/styled-plugin-flexbox

参数

名称	类型	description
value	string	对齐方式

value

名称	类型	description
center	string	水平/垂直居中
la	string	右边定值; 右边 auto
lar	string	左边定值; 中间 auto; 右边定值
ar	string	中间 auto; 右边定值
lr	string	左/右分散对齐
ta	string	上边定值; 下边 auto
tab	string	上边定值; 中间 auto; 下边定值
ab	string	中间 auto; 下边定值
tb	string	上/下分散对齐

绝对居中的一种实现方式。

原理

1. flexbox 布局，2／3 列的组合
2. 可配合 align/justify 使用

用法

<View plugin="flexbox:la">  <View p={10} bg="#f80" debug className="is-left">    Left  </View>  <View p={10} bg="#eee" debug className="is-right">    Auto  </View></View>

演示

Live Editor

Result

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^