Skip to main content

Flex

Flex 栅格系统是以规则的网格阵列来规范页面中的模块布局及信息分布，提高界面布局的一致性。

基本用法​

使用 Flex 包裹栅格的每一项 Flex.Item。

function App() {
  return (
    <div className="ykui-demo-column">
      <Flex
        width='360px'
      >
        <Flex.Item span={6}>
          <Select />
        </Flex.Item>
        <Flex.Item >
          <Input />
        </Flex.Item>
      </Flex>

      <Flex
        width='360px'
      >
        <Flex.Item span={6}>
          <Select />
        </Flex.Item>
        <Flex.Item span={8}>
          <Input />
        </Flex.Item>
        <Flex.Item span={10}>
          <Select />
        </Flex.Item>
      </Flex>

      <Flex width={240} gutter={8} style={{ background: "#EBEDF0" }}>
        <Flex.Item span={6} style={{ background: "#CDDBF9" }}>1</Flex.Item>
        <Flex.Item span={10} offset={2} style={{ background: "#CDDBF9" }}>2</Flex.Item>
      </Flex>
    </div>
  );
}

Flex API​

属性说明类型默认值
children内容ReactNode--
className类名string--
style样式CSSProperties--
width包裹项总宽度string〡number--
minWidth包裹项最小宽度string--
height包裹项总高度string--
layout内容布局string--
gutter左右间距number--

FlexItem API​

属性说明类型默认值
children内容ReactNode--
className类名string--
style样式CSSProperties--
span单项内容占比1 ~ 24--
offset左边间距number--