logo
为了能更好地了解您的商业使用需求,请参与 Ant Design Blazor 商业应用调查,一起建设商业应用社区,为企业系统研发赋能!

Flex弹性布局

Examples

最简单的用法。

expand code expand code

设置对齐方式。

expand code expand code

使用 gap 设置元素之间的间距,预设了 smallmiddlelarge 三种尺寸,也可以自定义间距。

expand code expand code

自动换行。

expand code expand code

嵌套使用,可以实现更复杂的布局。

expand code expand code

Flex API#

属性 描述 类型 默认值
Vertical 属性是 flex 垂直方向,使用 flex-direction: column Boolean --
Wrap 属性设置元素是单行显示还是多行显示,参考 flex-wrap:https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap String --
Justify 属性设置元素在主轴方向上的对齐方式 justify-content https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content String --
Align 属性设置元素在交叉轴 reference align-items https://developer.mozilla.org/en-US/docs/Web/CSS/align-items 方向上的对齐方式 String --
FlexCss 属性flex CSS 简写属性 参考 flex https://developer.mozilla.org/en-US/docs/Web/CSS/flex String --
Gap 属性将栅格之间的间隙设置为较小 |中 |大 |字符串 |数 String --
Component 属性自定义元素类型 String --
ChildContent 属性设置子元素 RenderFragment --
Id 属性组件 HTML 的 ID String Uniquely Generated ID
Class 属性为 DOM 元素指定一个或多个类名。 String --
Style 属性指定 DOM 元素的内联样式。 String --
RefBack 属性一个 ForwardRef 实例。您可以使用 AntDesign.ForwardRef.Current 获取对内部 DOM 的引用。 ForwardRef --
Divider分割线 Grid栅格
文档已更新,请点击 此处 更新。
A new version of this app is available. Click here to update.