feat(plugin-md-power): add flex container (#597)

docs/.vuepress/notes/zh/theme-guide.ts

@@ -48,6 +48,7 @@ export const themeGuide: ThemeNote = defineNoteConfig({
             'tabs',
             'timeline',
             'demo-wrapper',
+            'flex',
             'collapse',
             'npm-to',
             'caniuse',

docs/notes/theme/guide/markdown/flex.md

@@ -0,0 +1,130 @@
+---
+title: Flex 容器
+icon: material-symbols-light:flex-no-wrap
+createTime: 2025/05/16 17:56:39
+permalink: /guide/markdown/flex/
+badge: 新
+---
+
+## 概述
+
+Flex 弹性容器 `::: flex` 提供一种便捷的方式，在 markdown 中对 块级内容 应用 Flex 布局。
+
+## 用法
+
+```md
+::: flex [center|between|around] [start|center|end] [gap="20"] [column]
+
+<!--块级内容 1 -->
+
+<!--块级内容 2 -->
+
+:::
+```
+
+## 属性
+
+- 在 主轴 方向上，使用 `center` / `between` / `around` 指定对齐方式；
+- 在 交叉轴 方向上，使用 `start` / `center` / `end` 指定对齐方式；
+- 使用 `gap="20"` 指定间距；
+- 使用 `column` 指定主轴方向为垂直方向。
+
+## 示例
+
+### 表格居中对齐
+
+**输入：**
+
+```md
+::: flex center
+
+| 列 1 | 列 2 | 列 3 |
+| ---- | ---- | ---- |
+| 1    | 2    | 3    |
+| 4    | 5    | 6    |
+
+:::
+```
+
+**输出：**
+
+::: flex center
+
+| 列 1 | 列 2 | 列 3 |
+| ---- | ---- | ---- |
+| 1    | 2    | 3    |
+| 4    | 5    | 6    |
+
+:::
+
+### 两个表格左右对齐
+
+**输入：**
+
+```md
+::: flex between center
+
+| 列 1 | 列 2 | 列 3 |
+| ---- | ---- | ---- |
+| 1    | 2    | 3    |
+| 4    | 5    | 6    |
+
+| 列 1 | 列 2 | 列 3 |
+| ---- | ---- | ---- |
+| 1    | 2    | 3    |
+| 4    | 5    | 6    |
+
+:::
+```
+
+**输出：**
+
+::: flex between center
+
+| 列 1 | 列 2 | 列 3 |
+| ---- | ---- | ---- |
+| 1    | 2    | 3    |
+| 4    | 5    | 6    |
+
+| 列 1 | 列 2 | 列 3 |
+| ---- | ---- | ---- |
+| 1    | 2    | 3    |
+| 4    | 5    | 6    |
+
+:::
+
+### 平均排列两个表格
+
+**输入：**
+
+```md
+::: flex around center
+
+| 列 1 | 列 2 | 列 3 |
+| ---- | ---- | ---- |
+| 1    | 2    | 3    |
+| 4    | 5    | 6    |
+
+| 列 1 | 列 2 | 列 3 |
+| ---- | ---- | ---- |
+| 1    | 2    | 3    |
+| 4    | 5    | 6    |
+
+:::
+```
+
+**输出：**
+
+::: flex around center
+
+| 列 1 | 列 2 | 列 3 |
+| ---- | ---- | ---- |
+| 1    | 2    | 3    |
+| 4    | 5    | 6    |
+
+| 列 1 | 列 2 | 列 3 |
+| ---- | ---- | ---- |
+| 1    | 2    | 3    |
+| 4    | 5    | 6    |
+
+:::

plugins/plugin-md-power/src/node/container/align.ts

@@ -1,4 +1,6 @@
 import type { Markdown } from 'vuepress/markdown'
+import { parseRect } from '../utils/parseRect.js'
+import { resolveAttrs } from '../utils/resolveAttrs.js'
 import { createContainerPlugin } from './createContainer.js'
 
 const alignList = ['left', 'center', 'right', 'justify']
@@ -9,4 +11,41 @@ export function alignPlugin(md: Markdown): void {
       before: () => `<div style="text-align:${name}">`,
     })
   }
+
+  createContainerPlugin(md, 'flex', {
+    before: (info) => {
+      const { attrs } = resolveAttrs<FlexContainerAttrs>(info)
+      const styles: string[] = ['margin:16px 0;display:flex']
+
+      const align = attrs.start ? 'flex-start' : attrs.end ? 'flex-end' : attrs.center ? 'center' : ''
+      const justify = attrs.between ? 'space-between' : attrs.around ? 'space-around' : attrs.center ? 'center' : ''
+
+      if (align)
+        styles.push(`align-items:${align}`)
+
+      if (justify)
+        styles.push(`justify-content:${justify}`)
+
+      if (attrs.column)
+        styles.push('flex-direction:column')
+
+      if (attrs.wrap)
+        styles.push('flex-wrap:wrap')
+
+      styles.push(`gap:${parseRect(attrs.gap || '16')}`)
+
+      return `<div style="${styles.join(';')}">`
+    },
+  })
+}
+
+interface FlexContainerAttrs {
+  center?: boolean
+  wrap?: boolean
+  between?: boolean
+  around?: boolean
+  start?: boolean
+  end?: boolean
+  gap?: string
+  column?: boolean
 }