mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-07 20:08:21 +08:00
Code Issues Actions 36 Packages Projects Releases Wiki Activity
7dda41df03
ant-design/components/flex/index.zh-CN.md
lijianan 1e0c3b8c58
🔥feat: new component Flex (#44362) 
* feat: new component Flex

* feat: new component Flex

* fix: fix

* test: add test case

* fix: fix

* update size-limit

* test: update snap

* fix: fix

* test: update snap

* chore: add use client

* fix: lint

* test: update snap

* fix

* docs: add docs

* fix: fix demo

* clear

* demo: update demo

* update demos

* fix: fix

* fix: fix

* fix: fix

* fix: fix

* test: update snap

* fix: fix

* fix: fix

* demo: update demo

* feat: CP

* fix: use token

* fix: fix

* fix: fix test case

* test: update snap

* Update components/flex/style/index.ts

Co-authored-by: MadCcc <1075746765@qq.com>
Signed-off-by: lijianan <574980606@qq.com>

* Update components/flex/demo/align.tsx

Co-authored-by: MadCcc <1075746765@qq.com>
Signed-off-by: lijianan <574980606@qq.com>

* demo: update demo

* fix: fix

* docs

* update cover

* fix: fix

* test: update case

* fix: rerun CI

* fix: fix

* fix: fix

* fix: fix

* fix: fix

* demo: update demo

* fix: fix lint

* fix: fix

* fix: fix

* fix: fix

* fix:  fix

* fix: fix test case

* fix: fix

* docs: update docs

* fix: fix

* chore: fix

* chore: fix

* docs: update docs

* docs: update

* fix: fix demo

* type: update type

* add debug demo

---------

Signed-off-by: lijianan <574980606@qq.com>
Co-authored-by: 栗嘉男 <mac@macdeMacBook-Pro.local>
Co-authored-by: MadCcc <1075746765@qq.com>
2023-09-14 17:04:05 +08:00

2.0 KiB
Raw Blame History

category subtitle group title cover coverDark tag
Components 弹性布局 布局 Flex https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*SMzgSJZE_AwAAAAAAAAAAAAADrJ8AQ/original https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*8yArQ43EGccAAAAAAAAAAAAADrJ8AQ/original New

弹性布局。自 5.10.0 版本开始提供该组件。

何时使用

  • 适合设置元素之间的间距。
  • 适合设置各种水平、垂直对齐方式。

代码演示

基本布局 对齐方式 设置间隙 自动换行 组合使用 调试专用

API

自 antd@5.10.0 版本开始提供该组件。Flex 组件默认行为在水平模式下，为向上对齐，在垂直模式下，为拉伸对齐，你可以通过属性进行调整。

通用属性参考：通用属性

属性 说明 类型 默认值 版本
vertical flex 主轴的方向是否垂直，使用 flex-direction: column boolean false
wrap 设置元素单行显示还是多行显示 参考 flex-wrap nowrap
justify 设置元素在主轴方向上的对齐方式 参考 justify-content normal
align 设置元素在交叉轴方向上的对齐方式 参考 align-items normal
flex flex CSS 简写属性 参考 flex normal
gap 设置网格之间的间隙 small | middle | large | string | number -
component 自定义元素类型 React.ComponentType div

Design Token