Flex
Componentized flex-direction, align, justify, gap, and wrap for common layout rows.
Basic Usage
CfFlex is useful for button groups, form rows, status bars, and card toolbars. gap accepts token sizes, pixel numbers, or any CSS length.
ProductionHealthy3 alerts
CPU 42%
Memory 68%
Queue 12
Demo source
<CfFlex align="center" justify="between" wrap gap="md">...</CfFlex><CfFlex align="center" justify="between" wrap gap="md">...</CfFlex>API
| Prop | Type | Default | Description |
|---|---|---|---|
as | string / ElementType | div | Rendered element |
direction | row / column / row-reverse / column-reverse | row | Main axis direction |
align | start / center / end / stretch / baseline | stretch | Cross-axis alignment |
justify | start / center / end / between / around / evenly | start | Main-axis distribution |
gap | none / xs / sm / md / lg / xl / number / string | md | Spacing |
wrap | boolean | false | Allow wrapping |
inline | boolean | false | Use inline-flex |
full | boolean | false | Fill parent width |
反馈与讨论
Flex · Discussion