<Flex gap="3">
<Box width="64px" height="64px">
<DecorativeBox />
</Box>
<Box width="64px" height="64px">
<DecorativeBox />
</Box>
<Box width="64px" height="64px">
<DecorativeBox />
</Box>
<Box width="64px" height="64px">
<DecorativeBox />
</Box>
<Box width="64px" height="64px">
<DecorativeBox />
</Box>
</Flex>
此组件基于 div 元素，并支持通用外边距属性。
使用这些属性创建 flex 布局。
| 属性 | 类型 | 默认值 |
|---|---|---|
as | "div" | "span" | "div" |
asChild | boolean | 无默认值 |
display | Responsive<"none" | "inline-flex" | "flex"> | 无默认值 |
direction | Responsive<enum> | 无默认值 |
align | Responsive<enum> | 无默认值 |
justify | Responsive<"start" | "center" | "end" | "between"> | 无默认值 |
wrap | Responsive<"nowrap" | "wrap" | "wrap-reverse"> | 无默认值 |
gap | Responsive<enum | string> | 无默认值 |
gapX | Responsive<enum | string> | 无默认值 |
gapY | Responsive<enum | string> | 无默认值 |
以下属性在 Box、Flex、Grid、Container 和 Section 组件之间共享。在布局中阅读有关布局组件的更多信息。
| 属性 | 类型 | 默认值 |
|---|---|---|
p | Responsive<enum | string> | 无默认值 |
px | Responsive<enum | string> | 无默认值 |
py | Responsive<enum | string> | 无默认值 |
pt | Responsive<enum | string> | 无默认值 |
pr | Responsive<enum | string> | 无默认值 |
pb | Responsive<enum | string> | 无默认值 |
pl | Responsive<enum | string> | 无默认值 |
width | Responsive<string> | 无默认值 |
minWidth | Responsive<string> | 无默认值 |
maxWidth | Responsive<string> | 无默认值 |
height | Responsive<string> | 无默认值 |
minHeight | Responsive<string> | 无默认值 |
maxHeight | Responsive<string> | 无默认值 |
position | Responsive<enum> | 无默认值 |
inset | Responsive<enum | string> | 无默认值 |
top | Responsive<enum | string> | 无默认值 |
right | Responsive<enum | string> | 无默认值 |
bottom | Responsive<enum | string> | 无默认值 |
left | Responsive<enum | string> | 无默认值 |
overflow | Responsive<enum> | 无默认值 |
overflowX | Responsive<enum> | 无默认值 |
overflowY | Responsive<enum> | 无默认值 |
flexBasis | Responsive<string> | 无默认值 |
flexShrink | Responsive<enum | string> | 无默认值 |
flexGrow | Responsive<enum | string> | 无默认值 |
gridArea | Responsive<string> | 无默认值 |
gridColumn | Responsive<string> | 无默认值 |
gridColumnStart | Responsive<string> | 无默认值 |
gridColumnEnd | Responsive<string> | 无默认值 |
gridRow | Responsive<string> | 无默认值 |
gridRowStart | Responsive<string> | 无默认值 |
gridRowEnd | Responsive<string> | 无默认值 |