Flex
用來產生 FlexBox 的元件，但僅僅是為 了讓之後維護時，方便閱讀 Html 結構
import {Flex} from '@acrool/react-grid';
<Flex className="flex-column align-items-center">
{/*...ignore some */}
</Flex>
Props
| Props Name | Type | Required | Default | Description |
|---|---|---|---|---|
| style | CSS.Properties | |||
| className | string | |||
| col | TFlexDirection | |||
| sm | TFlexDirection | |||
| md | TFlexDirection | |||
| lg | TFlexDirection | |||
| xl | TFlexDirection | |||
| xxl | TFlexDirection | |||
| as | elementType | "div" | You can use a custom element for this component |
TFlexDirection
type TFlexDirection = 'column'|'row';
Sample
<Flex col="column" md="row" className="justify-content-between align-items-center gap-2">
<div>Flex Child 1</div>
<div>Flex Child 2</div>
<div>Flex Child 3</div>
<div>Flex Child 4</div>
</Flex>
Refer
關於對齊規則可參考 Bootstrap 5 CSS Grid
如何更好的理解CSS Grid，可以使用這個公用 Flexy Boxes