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

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

第1行：

~~[[File~~:~~El.png]]~~

Create a horizontal layout with flexible boxes:

~~[[File~~:~~Eld.png]]~~

~~[[File~~:~~Tir.png]]~~

~~[[File~~:~~Nef.png]]~~

~~[[File~~:~~Eth.png]]~~

</div>

~~[[File~~:~~Ith.png]]~~

~~[[File~~:~~Tal.png]]~~

Items wrap on smaller screens and have a minimum width:

~~[[File~~:~~Ral.png]]~~

~~[[File~~:~~Ort.png]]~~

~~[[File~~:~~Thul.png]]~~

~~[[File~~:~~Amn.png]]~~

~~[[File~~:~~Sol.png]]~~

</div>

~~[[File~~:~~Shael.png]]~~

~~[[File~~:~~Dol.png]]~~

Use flex-direction: column for vertical alignment:

~~[[File~~:~~Hel.png]]~~

~~[[File:Io~~.~~png]]~~

~~[[File:Lum~~.~~png]]~~

~~[[File~~:~~Ko.png]]~~

</div>

~~[[File~~:~~Fal.png]]~~

~~[[File:Lem.png]]~~

Center-align items vertically and horizontally:

~~[[File~~:~~Pul.png]]~~

~~[[File~~:~~Um.png]]~~

<div>Centered Content</div>

~~[[File~~:~~Mal.png]]~~

</div>

~~[[File~~:~~Ist.png]]~~

~~[[File:Gul.png]]~~

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

~~[[File:Vex.png]]~~

~~[[File:Ohm.png]]~~

~~[[File:Lo.png]]~~

{{{1}}}

~~[[File~~:~~Sur.png]]~~

</div>

~~[[File:Ber.png]]~~

</includeonly>

~~[[File~~:~~Jah.png]]~~

~~[[File~~:~~Cham.png]]~~

Usage in a page:

~~[[File:Zod.png]]~~

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

}}

@@ 第1行： / 第1行： @@
-[[File:El.png]]
+Create a horizontal layout with flexible boxes:
-[[File:Eld.png]]
+<div style="display: flex; gap: 10px; margin: 10px 0;">
-[[File:Tir.png]]
+  <div style="flex: 1; padding: 10px; background: #f0f0f0; border-radius: 5px;">Box 1</div>
-[[File:Nef.png]]
+  <div style="flex: 1; padding: 10px; background: #f0f0f0; border-radius: 5px;">Box 2</div>
-[[File:Eth.png]]
+</div>
-[[File:Ith.png]]
-[[File:Tal.png]]
+Items wrap on smaller screens and have a minimum width:
-[[File:Ral.png]]
+<div style="display: flex; flex-wrap: wrap; gap: 15px; justify-content: center;">
-[[File:Ort.png]]
+  <div style="flex: 1 1 250px; padding: 15px; background: #e3f2fd;">Item 1</div>
-[[File:Thul.png]]
+  <div style="flex: 1 1 250px; padding: 15px; background: #e3f2fd;">Item 2</div>
-[[File:Amn.png]]
+  <div style="flex: 1 1 250px; padding: 15px; background: #e3f2fd;">Item 3</div>
-[[File:Sol.png]]
+</div>
-[[File:Shael.png]]
-[[File:Dol.png]]
+Use flex-direction: column for vertical alignment:
-[[File:Hel.png]]
+<div style="display: flex; flex-direction: column; gap: 8px; max-width: 300px;">
-[[File:Io.png]]
+  <div style="padding: 8px; background: #ffebee;">Row 1</div>
-[[File:Lum.png]]
+  <div style="padding: 8px; background: #ffebee;">Row 2</div>
-[[File:Ko.png]]
+</div>
-[[File:Fal.png]]
-[[File:Lem.png]]
+Center-align items vertically and horizontally:
-[[File:Pul.png]]
+<div style="display: flex; justify-content: center; align-items: center; height: 200px; border: 1px dashed #ccc;">
-[[File:Um.png]]
+  <div>Centered Content</div>
-[[File:Mal.png]]
+</div>
-[[File:Ist.png]]
-[[File:Gul.png]]
+Create a reusable template (e.g., Template:FlexContainer):
-[[File:Vex.png]]
+<includeonly>
-[[File:Ohm.png]]
+<div style="display: flex; gap: {{{gap|10px}}}; flex-wrap: {{{wrap|nowrap}}}; margin: {{{margin|10px 0}}};">
-[[File:Lo.png]]
+  {{{1}}}
-[[File:Sur.png]]
+</div>
-[[File:Ber.png]]
+</includeonly>
-[[File:Jah.png]]
-[[File:Cham.png]]
+Usage in a page:
-[[File:Zod.png]]
+{{FlexContainer|wrap=wrap|gap=20px|
+  <div style="flex: 1;">A</div>
+  <div style="flex: 1;">B</div>
+}}