Test：修订间差异

←上一编辑

可视化wikitext

@@ 第1行： / 第1行： @@
-{| class="wikitable"
+Create a horizontal layout with flexible boxes:
-! 预览1 || 预览2 || 预览3 || 预览4 || 预览5 || 标题<br>作者<br>链接
+<div style="display: flex; gap: 10px; margin: 10px 0;">
-|-
+  <div style="flex: 1; padding: 10px; background: #f0f0f0; border-radius: 5px;">Box 1</div>
-| [[File:弹蛋蛋1.gif]] || [[File:弹蛋蛋2.gif]] || [[File:弹蛋蛋3.gif]] || [[File:弹蛋蛋4.gif]] || [[File:弹蛋蛋5.gif]] || 叫猫起床的方式～弹蛋蛋！<br>王二和咪咪<br>[https://www.bilibili.com/video/BV1UE42137HH 链接]
+  <div style="flex: 1; padding: 10px; background: #f0f0f0; border-radius: 5px;">Box 2</div>
-|}
+</div>
+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>
+}}