Test：修订间差异 - PD2汉化wiki

（未显示同一用户的35个中间版本）

第1行：

~~{| class~~="~~wikitable~~" style="~~text~~-~~align~~: ~~center~~;"

Create a horizontal layout with flexible boxes:

~~! colspan~~=5 style="~~width~~:~~512px~~;" ~~| 英 !! colspan=5~~ style="~~width~~:~~512px~~;" ~~| 繁 !! colspan=5~~ style="~~width~~:~~512px~~;" | <~~span class~~="~~d2-teal~~">~~简 !! 图~~

|-

~~| colspan=5 | Bash || colspan=5 | 猛擊 || colspan=5 |~~ <~~span class~~="d2-~~teal~~">~~猛击 || rowspan~~=~~2 | [[File~~:~~D3 Bash.png]]~~

|-

</div>

~~| Frostbite || Onslaught || Punish || Instigation || Pulverize || 霜凍 || 猛襲 || 摧毀 || 煽動 || 粉碎 ||~~ <~~span class~~="~~d2-teal~~">~~霜咬 ||~~ <~~span class~~="d2-~~teal~~">~~暴揍 ||~~ <~~span class~~="d2-~~teal~~">痛殴 || <~~span class~~="~~d2-teal~~">~~暴怒 ||~~ <~~span class~~="~~d2-teal~~">粉碎

|}

Items wrap on smaller screens and have a minimum width:

</div>

Use flex-direction: column for vertical alignment:

</div>

Center-align items vertically and horizontally:

<div>Centered Content</div>

</div>

Create a reusable template (e.g., Template:FlexContainer):

{{{1}}}

</div>

</includeonly>

Usage in a page:

{{FlexContainer|wrap=wrap|gap=20px|

}}

@@ 第1行： / 第1行： @@
-{| class="wikitable" style="text-align: center;"
+Create a horizontal layout with flexible boxes:
-! colspan=5 style="width:512px;" | 英 !! colspan=5 style="width:512px;" | 繁 !! colspan=5 style="width:512px;" | <span class="d2-teal">简 !! 图
+<div style="display: flex; gap: 10px; margin: 10px 0;">
-|-
+  <div style="flex: 1; padding: 10px; background: #f0f0f0; border-radius: 5px;">Box 1</div>
-| colspan=5 | Bash || colspan=5 | 猛擊 || colspan=5 | <span class="d2-teal">猛击 || rowspan=2 | [[File:D3 Bash.png]]
+  <div style="flex: 1; padding: 10px; background: #f0f0f0; border-radius: 5px;">Box 2</div>
-|-
+</div>
-| Frostbite || Onslaught || Punish || Instigation || Pulverize || 霜凍 || 猛襲 || 摧毀 || 煽動 || 粉碎 || <span class="d2-teal">霜咬 || <span class="d2-teal">暴揍 || <span class="d2-teal">痛殴 || <span class="d2-teal">暴怒 || <span class="d2-teal">粉碎
-|}
+Items wrap on smaller screens and have a minimum width:
+<div style="display: flex; flex-wrap: wrap; gap: 15px; justify-content: center;">
+  <div style="flex: 1 1 250px; padding: 15px; background: #e3f2fd;">Item 1</div>
+  <div style="flex: 1 1 250px; padding: 15px; background: #e3f2fd;">Item 2</div>
+  <div style="flex: 1 1 250px; padding: 15px; background: #e3f2fd;">Item 3</div>
+</div>
+Use flex-direction: column for vertical alignment:
+<div style="display: flex; flex-direction: column; gap: 8px; max-width: 300px;">
+  <div style="padding: 8px; background: #ffebee;">Row 1</div>
+  <div style="padding: 8px; background: #ffebee;">Row 2</div>
+</div>
+Center-align items vertically and horizontally:
+<div style="display: flex; justify-content: center; align-items: center; height: 200px; border: 1px dashed #ccc;">
+  <div>Centered Content</div>
+</div>
+Create a reusable template (e.g., Template:FlexContainer):
+<includeonly>
+<div style="display: flex; gap: {{{gap|10px}}}; flex-wrap: {{{wrap|nowrap}}}; margin: {{{margin|10px 0}}};">
+  {{{1}}}
+</div>
+</includeonly>
+Usage in a page:
+{{FlexContainer|wrap=wrap|gap=20px|
+  <div style="flex: 1;">A</div>
+  <div style="flex: 1;">B</div>
+}}