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

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

第1行：

Create a horizontal layout with flexible boxes:

<~~center>{{StaticTooltip|~~1~~=边缘 Edge|2={{~~#~~lsth~~:~~RWWeapons|边缘 Edge}}}}~~</~~center~~>

<~~br><br><br><br><br~~>

</div>

~~<center>~~

Items wrap on smaller screens and have a minimum width:

~~LU左上~~ <div ~~class~~="~~tooltip~~-~~wrapper~~">~~[[File:D3 Bash.png]]~~<div ~~class~~="~~tooltip-content-lu~~">~~[[File:Diablo_Hell_(Diablo_II).gif]]~~</div></div>

~~UC上中~~ <div ~~class~~="~~tooltip-wrapper~~">~~[[File~~:~~D3 Bash.png]]~~<div ~~class~~="~~tooltip~~-~~content~~-uc">~~[[File:Diablo_Hell_(Diablo_II).gif]]~~</div></div>

~~RU右上~~ <div ~~class~~="~~tooltip-wrapper~~">~~[[File~~:~~D3 Bash.png]]~~<div ~~class~~="~~tooltip~~-content-ru">~~[[File:Diablo_Hell_(Diablo_II).gif]]~~</div></div>

<br>

~~RC右中~~ <div ~~class~~="~~tooltip~~-~~wrapper~~">~~[[File~~:~~D3 Bash.png]]~~<div ~~class~~="~~tooltip-content-rc~~">~~[[File:Diablo_Hell_(Diablo_II).gif]]~~</div></div>

</div>

</~~center~~>

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行： @@
-<br><br><br><br><br><br><br><br><br><br>
+Create a horizontal layout with flexible boxes:
-<center>{{StaticTooltip|1=边缘 Edge|2={{#lsth:RWWeapons|边缘 Edge}}}}</center>
+<div style="display: flex; gap: 10px; margin: 10px 0;">
-<br><br><br><br><br>
+  <div style="flex: 1; padding: 10px; background: #f0f0f0; border-radius: 5px;">Box 1</div>
+  <div style="flex: 1; padding: 10px; background: #f0f0f0; border-radius: 5px;">Box 2</div>
+</div>
-<center>
+Items wrap on smaller screens and have a minimum width:
-LU左上 <div class="tooltip-wrapper">[[File:D3 Bash.png]]<div class="tooltip-content-lu">[[File:Diablo_Hell_(Diablo_II).gif]]</div></div>
+<div style="display: flex; flex-wrap: wrap; gap: 15px; justify-content: center;">
-UC上中 <div class="tooltip-wrapper">[[File:D3 Bash.png]]<div class="tooltip-content-uc">[[File:Diablo_Hell_(Diablo_II).gif]]</div></div>
+  <div style="flex: 1 1 250px; padding: 15px; background: #e3f2fd;">Item 1</div>
-RU右上 <div class="tooltip-wrapper">[[File:D3 Bash.png]]<div class="tooltip-content-ru">[[File:Diablo_Hell_(Diablo_II).gif]]</div></div>
+  <div style="flex: 1 1 250px; padding: 15px; background: #e3f2fd;">Item 2</div>
-<br>
+  <div style="flex: 1 1 250px; padding: 15px; background: #e3f2fd;">Item 3</div>
-RC右中 <div class="tooltip-wrapper">[[File:D3 Bash.png]]<div class="tooltip-content-rc">[[File:Diablo_Hell_(Diablo_II).gif]]</div></div>
+</div>
-</center>
+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>
+}}