mp-colorui/dist/h5/components/flex/index.js

MP ColorUI 是一款基于 Taro 框架并且联合 Color-UI CSS 库开发的多端 UI 组件库（支持小程序端和H5端）

import Taro from "@tarojs/taro-h5";
import Nerv from "nervjs";
import { View } from "@tarojs/components";
import { classNames } from "../../lib/index";
/**
 * flex 问题
 * 浮动比例
 * flex-sub==>1, flex-twice==>2, flex-treble==>3
 */
export default class ClFlex extends Taro.Component {
  render() {
    const props = this.props;

    const warpClassName = props.wrap ? "flex-wrap" : "";
    const justifyClassName = props.justify ? `justify-${props.justify}` : "";
    const alignClassName = props.align ? `align-${props.align}` : "";
    const directionClassName = props.direction ? `flex-direction-${props.direction}` : "";
    const flexComponent = <View className={classNames(`flex ${warpClassName} ${justifyClassName} ${alignClassName} ${directionClassName}`, props.className)} style={Object.assign({}, props.style)}>
      {this.props.children}
    </View>;
    return flexComponent;
  }

}
ClFlex.options = {
  addGlobalClass: true
};
ClFlex.defaultProps = {
  justify: "start",
  align: "start",
  direction: "row",
  wrap: false
};