Flex Layout

Flex component is a container component based on the Flexbox layout model, used to create flexible and responsive layout structures. The component provides a 10-column grid system, supports responsive layout, and can control element spacing, ordering, and alignment.

Basic Usage

Use t-flex and t-flex-group components to create simple flex layouts.

Use t-flex and t-flex-group components to create simple flexible layouts.

Show Code

Grid Configuration

Create grid layouts using span and offset attributes, with a total of 10 grid columns.

Create grid layout through span and offset properties, with a total of 10 grid columns.

Show Code

Ordering

Use the sort attribute to control the display order of elements.

Use the sort property to control the display order of elements.

Display order: 1 → 2 → 3 (regardless of position in code)

Show Code

Alignment

Set the alignment of elements within the flex container using justify and align attributes.

Set the alignment of elements within the flex container through justify and align properties.

Horizontal Alignment (justify)

start (default)

center

end

space-between

space-around

Vertical Alignment (align)

center (default)

start

end

Show Code

Gap Settings

Use the gap attribute to set spacing between elements.

Use the gap property to set the spacing between elements.

No Gap (default)

Gap 8px

Gap 16px

Gap 24px

Show Code

Responsive Layout

Flex component supports responsive layout, automatically adjusting layout based on different screen sizes.

The Flex component supports responsive layout and can automatically adjust the layout according to different screen sizes.

Responsive Changes (Please adjust browser window to see effects)

XS

<768px

SM

≥768px

MD

≥992px

LG

≥1200px

XL

≥1920px

When screen size changes, the number of items displayed per row will change:

• XS(<768px): 1 item per row (10 columns wide)
• SM(≥768px): 2 items per row (5 columns wide)
• MD(≥992px): 3-4 items per row (3 columns wide)
• LG(≥1200px): 5 items per row (2 columns wide)
• XL(≥1920px): 10 items per row (1 column wide)

Show Code

Flex API

Flex Attributes

Attribute	Description	Type	Accepted Values	Default
span	Number of columns occupied	number	0-10	-
offset	Left spacing of grid	number	0-10	0
sort	Element ordering	number	-	-
xs	<768px responsive grid number	number	0-10	-
sm	≥768px responsive grid number	number	0-10	-
md	≥992px responsive grid number	number	0-10	-
lg	≥1200px responsive grid number	number	0-10	-
xl	≥1920px responsive grid number	number	0-10	-

FlexGroup Attributes

Attribute	Description	Type	Accepted Values	Default
justify	Main axis alignment	string	start/end/center/space-around/space-between/space-evenly	start
align	Cross axis alignment	string	start/center/end	-
gap	Element spacing (px)	number	-	12

Slots

Slot Name	Description
default	Default slot for child elements

Style Variables

Flex component uses the following style variables, which can be customized through SCSS variables:

Variable Name	Description
$bg-color-default	Default background color
$border-color-default	Default border color
$text-color-default	Default text color