import {Meta, Unstyled} from '@storybook/addon-docs/blocks'

<Meta title='@dxtmisha/vi/wiki/styles/# Tiện ích Bố cục'/>

# Tiện ích Bố cục

Tập hợp các class CSS để tổ chức cấu trúc không gian cho các khu vực trình diễn trong Storybook và Wiki. Những class này giúp bạn nhanh chóng tạo lưới (grid), khung linh hoạt (flex) và giới hạn chiều rộng nội dung.

Tất cả các class đều có tiền tố `.wiki-storybook-`.


## Thẻ chứa

Class `.wiki-storybook-container` khởi tạo một thẻ chứa loại `inline-size`. Điều này cho phép các phần tử con sử dụng các truy vấn `@container`.

```html
<div class="wiki-storybook-container">
  <!-- Nội dung phản hồi theo chiều rộng của thẻ chứa này -->
</div>
```


## Lưới

Class `.wiki-storybook-group` tạo ra một thẻ chứa CSS Grid với 12 cột và khoảng cách (gap) tiêu chuẩn là `8px`.

```html
<div class="wiki-storybook-group">
  <div class="wiki-storybook-item wiki-storybook-item--squared--xs">Span XS</div>
  <div class="wiki-storybook-item wiki-storybook-item--squared--xs">Span XS</div>
  <div class="wiki-storybook-item wiki-storybook-item--squared--sm">Span SM</div>
</div>
```

<Unstyled>
  <div class="wiki-storybook-group">
    <div class="wiki-storybook-item wiki-storybook-item--auto wiki-storybook-item--padding wiki-storybook-item--squared--xs">Span XS</div>
    <div class="wiki-storybook-item wiki-storybook-item--auto wiki-storybook-item--padding wiki-storybook-item--squared--xs">Span XS</div>
    <div class="wiki-storybook-item wiki-storybook-item--auto wiki-storybook-item--padding wiki-storybook-item--squared--sm">Span SM</div>
  </div>
</Unstyled>


## Bố cục linh hoạt

Các tiện ích để nhanh chóng căn chỉnh các phần tử theo chiều ngang hoặc chiều dọc.

### Flex tiêu chuẩn
Class `.wiki-storybook-flex` — sắp xếp theo hàng ngang, tự động xuống dòng với khoảng cách `8px`.

```html
<div class="wiki-storybook-flex">
    <div class="wiki-storybook-item">1</div>
    <div class="wiki-storybook-item">2</div>
    <div class="wiki-storybook-item">3</div>
</div>
```

<Unstyled>
  <div class="wiki-storybook-flex">
    <div class="wiki-storybook-item wiki-storybook-item--widthAuto wiki-storybook-item--auto wiki-storybook-item--padding">1</div>
    <div class="wiki-storybook-item wiki-storybook-item--widthAuto wiki-storybook-item--auto wiki-storybook-item--padding">2</div>
    <div class="wiki-storybook-item wiki-storybook-item--widthAuto wiki-storybook-item--auto wiki-storybook-item--padding">3</div>
  </div>
</Unstyled>

### Căn giữa (Flex Center)
Class `.wiki-storybook-flex-center` căn chỉnh nội dung chính xác ở giữa.

```html
<div class="wiki-storybook-flex-center">
    <div class="wiki-storybook-item">1</div>
    <div class="wiki-storybook-item">2</div>
    <div class="wiki-storybook-item">3</div>
</div>
```

<Unstyled>
  <div class="wiki-storybook-flex-center">
    <div class="wiki-storybook-item wiki-storybook-item--widthAuto wiki-storybook-item--auto wiki-storybook-item--padding">1</div>
    <div class="wiki-storybook-item wiki-storybook-item--widthAuto wiki-storybook-item--auto wiki-storybook-item--padding">2</div>
    <div class="wiki-storybook-item wiki-storybook-item--widthAuto wiki-storybook-item--auto wiki-storybook-item--padding">3</div>
  </div>
</Unstyled>

### Căn giữa theo chiều dọc (Flex Align Center)
Class `.wiki-storybook-flex-align-center` căn chỉnh các phần tử theo chiều ngang với căn giữa theo chiều dọc.

```html
<div class="wiki-storybook-flex-align-center">
    <div class="wiki-storybook-item">1</div>
    <div class="wiki-storybook-item">2</div>
    <div class="wiki-storybook-item">3</div>
</div>
```

<Unstyled>
  <div class="wiki-storybook-flex-align-center">
    <div class="wiki-storybook-item wiki-storybook-item--widthAuto wiki-storybook-item--auto wiki-storybook-item--padding">1</div>
    <div class="wiki-storybook-item wiki-storybook-item--widthAuto wiki-storybook-item--auto wiki-storybook-item--padding">2</div>
    <div class="wiki-storybook-item wiki-storybook-item--widthAuto wiki-storybook-item--auto wiki-storybook-item--padding">3</div>
  </div>
</Unstyled>

### Xếp chồng dọc (Flex Column)
Class `.wiki-storybook-flex-column` sắp xếp các phần tử theo chiều dọc với khoảng cách `16px`.

```html
<div class="wiki-storybook-flex-column">
    <div class="wiki-storybook-item">1</div>
    <div class="wiki-storybook-item">2</div>
    <div class="wiki-storybook-item">3</div>
</div>
```

<Unstyled>
  <div class="wiki-storybook-flex-column">
    <div class="wiki-storybook-item wiki-storybook-item--widthAuto wiki-storybook-item--auto wiki-storybook-item--padding">1</div>
    <div class="wiki-storybook-item wiki-storybook-item--widthAuto wiki-storybook-item--auto wiki-storybook-item--padding">2</div>
    <div class="wiki-storybook-item wiki-storybook-item--widthAuto wiki-storybook-item--auto wiki-storybook-item--padding">3</div>
  </div>
</Unstyled>
