Flex 弹性布局容器

使用场景

基于 Flexbox 实现的弹性布局容器。响应式栅格支持基于屏幕宽度进行动态的布局，Flex 布局容器支持 12 栅格布局，支持借助栅格数实现基本的响应式布局能力。

示例

基本用法

1

2

3

inline

() => ( <Flex spacing="l" direction="row"> <Box width="40px" height="40px" bg="brand.normal" color="white"> 1 </Box> <Box width="40px" height="40px" bg="brand.normal" color="white"> 2 </Box> <Box width="40px" height="40px" bg="brand.normal" color="white"> 3 </Box> </Flex> )

() => (
  <Flex spacing="l" direction="row">
    <Box width="40px" height="40px" bg="brand.normal" color="white">
      1
    </Box>
    <Box width="40px" height="40px" bg="brand.normal" color="white">
      2
    </Box>
    <Box width="40px" height="40px" bg="brand.normal" color="white">
      3
    </Box>
  </Flex>
)

垂直布局

1

2

3

inline

() => ( <Flex spacing="l" direction="column"> <Box width="40px" height="40px" bg="brand.normal" color="white"> 1 </Box> <Box width="40px" height="40px" bg="brand.normal" color="white"> 2 </Box> <Box width="40px" height="40px" bg="brand.normal" color="white"> 3 </Box> </Flex> )

() => (
  <Flex spacing="l" direction="column">
    <Box width="40px" height="40px" bg="brand.normal" color="white">
      1
    </Box>
    <Box width="40px" height="40px" bg="brand.normal" color="white">
      2
    </Box>
    <Box width="40px" height="40px" bg="brand.normal" color="white">
      3
    </Box>
  </Flex>
)

多列

1/3

1/3

1/3

noInline

const Example = styled.div` .rex-flex-item { padding: 12px 0; background-color: #ddd; border: 1px solid #ccc; text-align: center; } `; const EqualCols = () => ( <Example> <Flex> <FlexItem>1/3</FlexItem> <FlexItem>1/3</FlexItem> <FlexItem>1/3</FlexItem> </Flex> </Example> ); render(<EqualCols />)

const Example = styled.div`
  .rex-flex-item {
    padding: 12px 0;
    background-color: #ddd;
    border: 1px solid #ccc;
    text-align: center;
  }
`;

const EqualCols = () => (
  <Example>
    <Flex>
      <FlexItem>1/3</FlexItem>
      <FlexItem>1/3</FlexItem>
      <FlexItem>1/3</FlexItem>
    </Flex>
  </Example>
);

render(<EqualCols />)

不同列宽

1/12

1/6

1/4

1/2

noInline

const Example = styled.div` .rex-flex-item { padding: 12px 0; background-color: #ddd; border: 1px solid #ccc; text-align: center; } `; const ColSpan = () => ( <Example> <Flex> <FlexItem span={1}>1/12</FlexItem> <FlexItem span={2}>1/6</FlexItem> <FlexItem span={3}>1/4</FlexItem> <FlexItem span={6}>1/2</FlexItem> </Flex> </Example> ); render(<ColSpan />)

const Example = styled.div`
  .rex-flex-item {
    padding: 12px 0;
    background-color: #ddd;
    border: 1px solid #ccc;
    text-align: center;
  }
`;

const ColSpan = () => (
  <Example>
    <Flex>
      <FlexItem span={1}>1/12</FlexItem>
      <FlexItem span={2}>1/6</FlexItem>
      <FlexItem span={3}>1/4</FlexItem>
      <FlexItem span={6}>1/2</FlexItem>
    </Flex>
  </Example>
);

render(<ColSpan />)

自动列宽

item

动态宽度的内容

item

noInline

const Example = styled.div` .rex-flex-item { padding: 12px 0; background-color: #ddd; border: 1px solid #ccc; text-align: center; } `; const AutoCol = () => ( <Example> <Flex> <FlexItem>item</FlexItem> <FlexItem span="auto">动态宽度的内容</FlexItem> <FlexItem>item</FlexItem> </Flex> </Example> ); render(<AutoCol />)

const Example = styled.div`
  .rex-flex-item {
    padding: 12px 0;
    background-color: #ddd;
    border: 1px solid #ccc;
    text-align: center;
  }
`;

const AutoCol = () => (
  <Example>
    <Flex>
      <FlexItem>item</FlexItem>
      <FlexItem span="auto">动态宽度的内容</FlexItem>
      <FlexItem>item</FlexItem>
    </Flex>
  </Example>
);

render(<AutoCol />)

响应式列宽

responsive

item

item

noInline

const Example = styled.div` .rex-flex-item { padding: 12px 0; background-color: #ddd; border: 1px solid #ccc; text-align: center; } `; const ResponsiveCol = () => ( <Example> <Flex wrap="wrap"> <FlexItem span={{ s: 12, m: 6, l: 4 }}>responsive</FlexItem> <FlexItem>item</FlexItem> <FlexItem>item</FlexItem> </Flex> </Example> ); render(<ResponsiveCol />)

const Example = styled.div`
  .rex-flex-item {
    padding: 12px 0;
    background-color: #ddd;
    border: 1px solid #ccc;
    text-align: center;
  }
`;

const ResponsiveCol = () => (
  <Example>
    <Flex wrap="wrap">
      <FlexItem span={{ s: 12, m: 6, l: 4 }}>responsive</FlexItem>
      <FlexItem>item</FlexItem>
      <FlexItem>item</FlexItem>
    </Flex>
  </Example>
);

render(<ResponsiveCol />)

API

Flex

字段	描述
spacing	StringOrNumber 间距
direction	FlexDirection 子元素排列方向
align	AlignItems y 轴对齐方式
justify	JustifyContent x 轴对齐方式
wrap	FlexWrap
basis	FlexBasis<Length>
grow	FlexGrow
shrink	FlexShrink
as	any
style	CSSProperties
className	string
m	StringOrNumber
margin	StringOrNumber
mt	StringOrNumber
marginTop	StringOrNumber
mr	StringOrNumber
marginRight	StringOrNumber
mb	StringOrNumber
marginBottom	StringOrNumber
ml	StringOrNumber
marginLeft	StringOrNumber
mx	StringOrNumber
marginX	StringOrNumber
my	StringOrNumber
marginY	StringOrNumber
p	StringOrNumber
padding	StringOrNumber
pt	StringOrNumber
paddingTop	StringOrNumber
pr	StringOrNumber
paddingRight	StringOrNumber
pb	StringOrNumber
paddingBottom	StringOrNumber
pl	StringOrNumber
paddingLeft	StringOrNumber
px	StringOrNumber
paddingX	StringOrNumber
py	StringOrNumber
paddingY	StringOrNumber
color	Color
bg	Color
backgroundColor	Color
opacity	Opacity
width	StringOrNumber
minWidth	StringOrNumber
maxWidth	StringOrNumber
height	StringOrNumber
minHeight	StringOrNumber
maxHeight	StringOrNumber
size	StringOrNumber
display	Display
verticalAlign	VerticalAlign<0 | (string & {})>
overflow	Overflow
overflowX	OverflowX
overflowY	OverflowY
fontFamily	FontFamily
fontStyle	FontStyle
letterSpacing	LetterSpacing<0 | (string & {})>
textAlign	TextAlign
fontSize	string
fontWeight	FontWeight
lineHeight	StringOrNumber
alignItems	AlignItems
alignContent	AlignContent
justifyItems	JustifyItems
justifyContent	JustifyContent
flexWrap	FlexWrap
flexDirection	FlexDirection
flex	Flex<Length>
flexGrow	FlexGrow
flexShrink	FlexShrink
flexBasis	FlexBasis<Length>
justifySelf	JustifySelf
alignSelf	AlignSelf
order	Order
gridGap	GridGap<Length>
gridRowGap	GridRowGap<Length>
gridColumnGap	GridColumnGap<Length>
gridColumn	GridColumn
gridColumnStart	GridColumnStart
gridColumnEnd	GridColumnEnd
gridRow	GridRow
gridRowStart	GridRowStart
gridRowEnd	GridRowEnd
gridArea	GridArea
gridTemplateRows	GridTemplateRows<0 | (string & {})>
gridTemplateColumns	GridTemplateColumns<0 | (string & {})>
gridTemplateAreas	GridTemplateAreas
border	string
borderTop	string
borderRight	string
borderBottom	string
borderLeft	string
borderWidth	StringOrNumber
borderColor	Color
borderTopColor	Color
borderRightColor	Color
borderBottomColor	Color
borderLeftColor	Color
borderRadius	string
position	Position
zIndex	ZIndex
top	string
right	string
bottom	string
left	string
boxShadow	BoxShadow
textShadow	TextShadow

FlexItem

字段	描述
span	ResponsiveType
as	any
style	CSSProperties
className	string
m	StringOrNumber
margin	StringOrNumber
mt	StringOrNumber
marginTop	StringOrNumber
mr	StringOrNumber
marginRight	StringOrNumber
mb	StringOrNumber
marginBottom	StringOrNumber
ml	StringOrNumber
marginLeft	StringOrNumber
mx	StringOrNumber
marginX	StringOrNumber
my	StringOrNumber
marginY	StringOrNumber
p	StringOrNumber
padding	StringOrNumber
pt	StringOrNumber
paddingTop	StringOrNumber
pr	StringOrNumber
paddingRight	StringOrNumber
pb	StringOrNumber
paddingBottom	StringOrNumber
pl	StringOrNumber
paddingLeft	StringOrNumber
px	StringOrNumber
paddingX	StringOrNumber
py	StringOrNumber
paddingY	StringOrNumber
color	Color
bg	Color
backgroundColor	Color
opacity	Opacity
width	StringOrNumber
minWidth	StringOrNumber
maxWidth	StringOrNumber
height	StringOrNumber
minHeight	StringOrNumber
maxHeight	StringOrNumber
size	StringOrNumber
display	Display
verticalAlign	VerticalAlign<0 | (string & {})>
overflow	Overflow
overflowX	OverflowX
overflowY	OverflowY
fontFamily	FontFamily
fontStyle	FontStyle
letterSpacing	LetterSpacing<0 | (string & {})>
textAlign	TextAlign
fontSize	string
fontWeight	FontWeight
lineHeight	StringOrNumber
alignItems	AlignItems
alignContent	AlignContent
justifyItems	JustifyItems
justifyContent	JustifyContent
flexWrap	FlexWrap
flexDirection	FlexDirection
flex	Flex<Length>
flexGrow	FlexGrow
flexShrink	FlexShrink
flexBasis	FlexBasis<Length>
justifySelf	JustifySelf
alignSelf	AlignSelf
order	Order
gridGap	GridGap<Length>
gridRowGap	GridRowGap<Length>
gridColumnGap	GridColumnGap<Length>
gridColumn	GridColumn
gridColumnStart	GridColumnStart
gridColumnEnd	GridColumnEnd
gridRow	GridRow
gridRowStart	GridRowStart
gridRowEnd	GridRowEnd
gridArea	GridArea
gridTemplateRows	GridTemplateRows<0 | (string & {})>
gridTemplateColumns	GridTemplateColumns<0 | (string & {})>
gridTemplateAreas	GridTemplateAreas
border	string
borderTop	string
borderRight	string
borderBottom	string
borderLeft	string
borderWidth	StringOrNumber
borderColor	Color
borderTopColor	Color
borderRightColor	Color
borderBottomColor	Color
borderLeftColor	Color
borderRadius	string
position	Position
zIndex	ZIndex
top	string
right	string
bottom	string
left	string
boxShadow	BoxShadow
textShadow	TextShadow