Flex

由开发者袁果锅精心打造的Flex组件,旨在为前端开发人员提供一套高效、灵活且易于使用的布局解决方案。该组件充分利用了 CSS Flexbox 布局模型的强大能力,旨在简化复杂 UI 界面的构建过程,特别是在处理元素对齐、分布和顺序调整方面。

Basic usage

The basic use case is using this component to provide unified space between each components

Using Space to provide space

袁果锅
袁果锅
袁果锅
袁果锅
袁果锅
袁果锅
袁果锅
袁果锅
袁果锅
袁果锅
袁果锅
袁果锅
袁果锅
袁果锅
袁果锅
袁果锅
袁果锅
袁果锅
袁果锅
袁果锅
袁果锅
袁果锅
袁果锅
袁果锅
袁果锅
袁果锅
袁果锅
袁果锅
袁果锅
袁果锅
袁果锅
袁果锅
袁果锅
袁果锅
袁果锅
袁果锅
袁果锅
袁果锅
袁果锅
袁果锅
袁果锅
袁果锅
袁果锅
袁果锅
袁果锅
袁果锅
袁果锅
袁果锅
袁果锅
袁果锅
袁果锅
袁果锅
袁果锅
袁果锅
袁果锅
袁果锅
袁果锅
袁果锅
袁果锅
袁果锅
袁果锅
袁果锅
袁果锅
袁果锅
袁果锅
袁果锅
袁果锅

API

Attributes

NameDescriptionTypeDefault
directionPlacement directionenum`'horizontal''vertical'`
classClassnamestring / object / array
styleExtra style rulesstring / object / array
alignmentControls the alignment of itemsstring
sizeSpacing sizestring / array / number
wrapAuto wrappingbooleanfalse
spaceBetweenApply space-between layoutbooleanfalse
alignCenterAlign items to centerbooleanfalse
alignEndAlign items to endbooleanfalse
alignStartAlign items to startbooleanfalse
justifyCenterJustify content to centerbooleanfalse
justifyEndJustify content to endbooleanfalse
justifyStartJustify content to startbooleanfalse
justifyBetweenJustify content with space-betweenbooleanfalse
centerCenter items both horizontally and verticallybooleanfalse

Source

ComponentDocs

Contributors