react-layout-kit/es/Flexbox/index.js

a npm develop template

import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
var _excluded = ["className", "children"];

var _templateObject;

import { cx } from '@emotion/css';
import styled from '@emotion/styled';
import { getCssValue, getFlexDirection, isHorizontal, isSpaceDistribution, isVertical } from "../utils";
import { jsx as _jsx } from "react/jsx-runtime";
var Basic = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  // \u662F\u5426\u663E\u793A\n  display: ", ";\n\n  flex: ", ";\n\n  flex-direction: ", ";\n  justify-content: ", ";\n  align-items: ", ";\n\n  width: ", ";\n  height: ", ";\n\n  padding: ", ";\n\n  gap: ", ";\n\n  > *:not(:last-child) {\n    margin-block-end: ", ";\n  }\n"])), function (props) {
  return props.visible === false ? 'none' : 'flex';
}, function (props) {
  return props.flex;
}, function (props) {
  return getFlexDirection(props.direction, props.horizontal);
}, function (props) {
  return props.distribution;
}, function (props) {
  return props.align;
}, function (props) {
  if (isHorizontal(props.direction, props.horizontal) && !props.width && isSpaceDistribution(props.distribution)) return '100%';
  return getCssValue(props.width);
}, function (props) {
  return getCssValue(props.height);
}, function (props) {
  return getCssValue(props.padding);
}, function (props) {
  return getCssValue(props.gap);
}, function (props) {
  return isVertical(props.direction, props.horizontal) && getCssValue(props.gap);
});
export var Flexbox = function Flexbox(_ref) {
  var className = _ref.className,
      children = _ref.children,
      props = _objectWithoutProperties(_ref, _excluded);

  return /*#__PURE__*/_jsx(Basic, _objectSpread(_objectSpread({}, props), {}, {
    className: cx('rlk-flexbox', className),
    children: children
  }));
};