Box

Example
基本
排布方向
内外边距
垂直水平对齐
折行
API

弹性布局组件，支持版本1.19.0+。

何时使用 #

用于弹性布局, 通过display: flex实现。
受浏览器限制，本功能支持到IE10+，IE下#参考文档。

FAQ #

为何嵌套自定义组件，间距没有生效？ #

自定义组件的间距是 Box 算出来，同style透传给子组件的，因此子组件需要至少透传style属性；

// wrong
function Foo() {
    return <div />;
}

// correct
function Foo({ style }) {
    return <div style={style} />;
}

代码演示 #

基本 #

简单的弹性布局展示，可以通过 spacing 控制子元素的间距。

排布方向 #

默认子元素的排布方向为 column ，可以通过 direction 参数修改为 row。

内外边距 #

可以通过 padding margin 设置 Box 的内、外边距， [10, 5] 表示上下方向为10，左右方向为5。

垂直水平对齐 #

justify align 等价于justify-contents align-items，用来设置 Box 的主轴方向、垂直主轴方向的对齐方式，即：

direction 为 row 时， align 控制垂直方向, justify 控制水平方向；
direction 为 column 时(默认值)， justify 控制垂直方向, align 控制水平方向。

import React from 'react';
import ReactDOM from 'react-dom';
import { Box } from '@alifd/next';
class BoxDemo extends React.Component {
  render() {
    return (
      <div className="list">
        <div className="list-item">
          <Box direction="row" align="center" style={{ height: 90 }}>
            <Box className="box-180-50" />
            <Box className="box-180-50" />
            <Box className="box-180-50" />
            <Box className="box-180-50" />
          </Box>
        </div>
        <div className="list-item">
          <Box direction="row" justify="center">
            <Box className="box-180-50" />
            <Box className="box-180-50" />
            <Box className="box-180-50" />
            <Box className="box-180-50" />
          </Box>
        </div>
        <div className="list-item">
          <Box direction="row" justify="center" padding={20}>
            <Box className="box-180-50" />
            <Box className="box-180-50" />
            <Box className="box-180-50" />
            <Box className="box-180-50" />
          </Box>
        </div>
      </div>
    );
  }
}
ReactDOM.render(<BoxDemo />, mountNode);

折行 #

默认不折行，可以通过设置 wrap 控制折行。受浏览器限制，本功能支持到IE11+。

import React from 'react';
import ReactDOM from 'react-dom';
import { Box, Switch } from '@alifd/next';
class BoxDemo extends React.Component {
  constructor() {
    super(...arguments);
    this.state = {
      wrap: true,
    };
    this.onSwitchChange = checked => {
      this.setState({
        wrap: checked,
      });
    };
  }
  render() {
    return (
      <div className="list">
        <Switch
          style={{ width: 70 }}
          defaultChecked
          checkedChildren="wrap"
          onChange={this.onSwitchChange}
        />
        <div className="list-item">
          <Box spacing={20} wrap={this.state.wrap} direction="row">
            <div className="box-180-50" />
            <div className="box-180-50" />
            <div className="box-180-50" />
            <div className="box-180-50" />
            <div className="box-180-50" />
            <div className="box-180-50" />
            <div className="box-180-50" />
            <div className="box-180-50" />
            <div className="box-180-50" />
          </Box>
        </div>
      </div>
    );
  }
}
ReactDOM.render(<BoxDemo />, mountNode);

API #

Box #

参数	说明	类型	默认值
flex	同 CSS 属性 `flex`，支持数组方式设置	\| CSS.Property.Flex \| [CSS.Property.FlexGrow, CSS.Property.FlexShrink, CSS.Property.FlexBasis]	-
direction	布局方向，同 CSS 属性 `flex-direction`	CSS.Property.FlexDirection	'column'
wrap	是否折行	boolean	false
spacing	元素之间的间距	Spacing	-
margin	容器外间距	Spacing	-
padding	容器内间距	Spacing	-
justify	沿着主轴方向，子元素们的排布关系，同 CSS 属性 `justify-content`	CSS.Property.JustifyContent	-
align	沿交叉轴方向，子元素们的排布关系，同 CSS 属性 `align-items`	CSS.Property.AlignItems	-
component	定制 JSX 标签名	keyof React.JSX.IntrinsicElements	'div'

Spacing #

export type Spacing =
    | number
    | [topAndBottom: number, rightAndLeft: number]
    | [top: number, rightAndLeft: number, bottom: number]
    | [top: number, right: number, bottom: number, left: number];