gitea-yuany3721/vuepress-theme-plume
1
0
Fork 1
mirror of https://github.com/pengzhanbo/vuepress-theme-plume.git synced 2026-04-23 10:58:13 +08:00
Code Issues Packages Projects Releases Wiki Activity
vuepress-theme-plume/assets/flex-aC-8yyJm.js

38 lines
20 KiB
JavaScript
Raw Blame History

import{P as e,f as t,h as n}from"./runtime-core.esm-bundler-CZvn3YaB.js";import{t as r}from"./plugin-vue_export-helper-CxTVcLa7.js";var i=JSON.parse(`{"path":"/guide/markdown/flex/","title":"Flex 容器 | 指南","lang":"zh-CN","frontmatter":{"title":"Flex 容器","icon":"material-symbols-light:flex-no-wrap","createTime":"2025/05/16 17:56:39","permalink":"/guide/markdown/flex/","badge":"新","description":"概述 Flex 弹性容器 ::: flex 提供一种便捷的方式，在 markdown 中对 块级内容 应用 Flex 布局。 用法 属性 在 主轴 方向上，使用 center / between / around 指定对齐方式； 在 交叉轴 方向上，使用 start / center / end 指定对齐方式； 使用 gap=&quot;20&quot...","head":[["script",{"type":"application/ld+json"},"{\\"@context\\":\\"https://schema.org\\",\\"@type\\":\\"Article\\",\\"headline\\":\\"Flex 容器\\",\\"image\\":[\\"\\"],\\"dateModified\\":\\"2025-10-07T15:13:09.000Z\\",\\"author\\":[]}"],["meta",{"property":"og:url","content":"https://theme-plume.vuejs.press/guide/markdown/flex/"}],["meta",{"property":"og:site_name","content":"Plume 主题"}],["meta",{"property":"og:title","content":"Flex 容器"}],["meta",{"property":"og:description","content":"概述 Flex 弹性容器 ::: flex 提供一种便捷的方式，在 markdown 中对 块级内容 应用 Flex 布局。 用法 属性 在 主轴 方向上，使用 center / between / around 指定对齐方式； 在 交叉轴 方向上，使用 start / center / end 指定对齐方式； 使用 gap=&quot;20&quot..."}],["meta",{"property":"og:type","content":"article"}],["meta",{"property":"og:locale","content":"zh-CN"}],["meta",{"property":"og:locale:alternate","content":"en-US"}],["meta",{"property":"og:updated_time","content":"2025-10-07T15:13:09.000Z"}],["meta",{"property":"article:modified_time","content":"2025-10-07T15:13:09.000Z"}],["link",{"rel":"alternate","hreflang":"en-us","href":"https://theme-plume.vuejs.press/en/guide/markdown/flex/"}]]},"readingTime":{"minutes":1.04,"words":311},"git":{"createdTime":1747402510000,"updatedTime":1759849989000,"contributors":[{"name":"pengzhanbo","username":"pengzhanbo","email":"volodymyr@foxmail.com","commits":2,"avatar":"https://avatars.githubusercontent.com/pengzhanbo?v=4","url":"https://github.com/pengzhanbo"}],"changelog":[{"hash":"4d2361a7046214fe0f4e4af01831107fd00e38ad","time":1759849989000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"feat(theme)!: add collections support (#704)"},{"hash":"79af255cd8dd1f01cdc05b95ff7278a28009b5d0","time":1747402510000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"feat(plugin-md-power): add flex container (#597)"}]},"autoDesc":true,"filePathRelative":"guide/markdown/flex.md","headers":[],"bulletin":false}`),a={name:`flex.md`};function o(r,i,a,o,s,c){return e(),t(`div`,null,[...i[0]||=[n(`<h2 id="概述" tabindex="-1"><a class="header-anchor" href="#概述"><span>概述</span></a></h2><p>Flex 弹性容器 <code>::: flex</code> 提供一种便捷的方式，在 markdown 中对 块级内容 应用 Flex 布局。</p><h2 id="用法" tabindex="-1"><a class="header-anchor" href="#用法"><span>用法</span></a></h2><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">::: flex </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">center|between|around</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">]</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> [</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">start|center|end</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">]</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> [</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">gap=&quot;20&quot;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">]</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> [</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">column</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">]</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">&lt;!--块级内容 1 --&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">&lt;!--块级内容 2 --&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">:::</span></span></code></pre></div><h2 id="属性" tabindex="-1"><a class="header-anchor" href="#属性"><span>属性</span></a></h2><ul><li>在 主轴 方向上，使用 <code>center</code> / <code>between</code> / <code>around</code> 指定对齐方式；</li><li>在 交叉轴 方向上，使用 <code>start</code> / <code>center</code> / <code>end</code> 指定对齐方式；</li><li>使用 <code>gap=&quot;20&quot;</code> 指定间距；</li><li>使用 <code>column</code> 指定主轴方向为垂直方向。</li></ul><h2 id="示例" tabindex="-1"><a class="header-anchor" href="#示例"><span>示例</span></a></h2><h3 id="表格居中对齐" tabindex="-1"><a class="header-anchor" href="#表格居中对齐"><span>表格居中对齐</span></a></h3><p><strong>输入：</strong></p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">::: flex center</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">|</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 列 1 </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">|</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 列 2 </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">|</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 列 3 </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">|</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">|</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> ----</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> |</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> ----</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> |</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> ----</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> |</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">|</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 1 </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">|</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 2 </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">|</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 3 </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">|</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">|</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 4 </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">|</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 5 </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">|</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 6 </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">|</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">:::</span></span></code></pre></div><p><strong>输出：</strong></p><div style="margin:16px 0;display:flex;align-items:center;justify-content:center;gap:16px;"><table><thead><tr><th>列 1</th><th>列 2</th><th>列 3</th></tr></thead><tbody><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>4</td><td>5</td><td>6</td></tr></tbody></table></div><h3 id="两个表格左右对齐" tabindex="-1"><a class="header-anchor" href="#两个表格左右对齐"><span>两个表格左右对齐</span></a></h3><p><strong>输入：</strong></p><div class="language-md line-numbers-mode" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">::: flex between center</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">|</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 列 1 </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">|</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 列 2 </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">|</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 列 3 </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">|</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">|</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> ----</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> |</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> ----</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> |</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> ----</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> |</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">|</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 1 </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">|</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 2 </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">|</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 3 </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">|</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">|</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 4 </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">|</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 5 </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">|</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 6 </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">|</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">|</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 列 1 </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">|</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 列 2 </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">|</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 列 3 </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">|</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">|</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> ----</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> |</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> ----</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> |</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> ----</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> |</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">|</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 1 </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">|</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 2 </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">|</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 3 </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">|</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">|</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 4 </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">|</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 5 </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">|</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 6 </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">|</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">:::</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>输出：</strong></p><div style="margin:16px 0;display:flex;align-items:center;justify-content:space-between;gap:16px;"><table><thead><tr><th>列 1</th><th>列 2</th><th>列 3</th></tr></thead><tbody><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>4</td><td>5</td><td>6</td></tr></tbody></table><table><thead><tr><th>列 1</th><th>列 2</th><th>列 3</th></tr></thead><tbody><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>4</td><td>5</td><td>6</td></tr></tbody></table></div><h3 id="平均排列两个表格" tabindex="-1"><a class="header-anchor" href="#平均排列两个表格"><span>平均排列两个表格</span></a></h3><p><strong>输入：</strong></p><div class="language-md line-numbers-mode" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">::: flex around center</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">|</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 列 1 </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">|</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 列 2 </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">|</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 列 3 </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">|</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">|</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> ----</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> |</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> ----</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> |</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> ----</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> |</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">|</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 1 </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">|</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 2 </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">|</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 3 </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">|</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">|</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 4 </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">|</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 5 </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">|</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 6 </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">|</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">|</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 列 1 </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">|</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 列 2 </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">|</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 列 3 </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">|</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">|</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> ----</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> |</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> ----</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> |</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> ----</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> |</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">|</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 1 </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">|</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 2 </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">|</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 3 </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">|</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">|</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 4 </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">|</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 5 </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">|</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 6 </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">|</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">:::</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>输出：</strong></p><div style="margin:16px 0;display:flex;align-items:center;justify-content:space-around;gap:16px;"><table><thead><tr><th>列 1</th><th>列 2</th><th>列 3</th></tr></thead><tbody><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>4</td><td>5</td><td>6</td></tr></tbody></table><table><thead><tr><th>列 1</th><th>列 2</th><th>列 3</th></tr></thead><tbody><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>4</td><td>5</td><td>6</td></tr></tbody></table></div>`,22)]])}var s=r(a,[[`render`,o]]);export{i as _pageData,s as default};
Reference in New Issue View Git Blame Copy Permalink