Test：修订间差异

←上一编辑

可视化wikitext

2025年2月23日 (日) 19:14的最新版本

Create a horizontal layout with flexible boxes:

Box 1

Box 2

Items wrap on smaller screens and have a minimum width:

Item 1

Item 2

Item 3

Use flex-direction: column for vertical alignment:

Row 1

Row 2

Center-align items vertically and horizontally:

Centered Content

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

Usage in a page: 模板:FlexContainer

@@ 第1行： / 第1行： @@
-加载有点慢, 请稍等...<br>
+Create a horizontal layout with flexible boxes:
+<div style="display: flex; gap: 10px; margin: 10px 0;">
+  <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>
-{| class="non-table mw-collapsible mw-collapsed"
+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>
-__TOC__
+  <div style="flex: 1 1 250px; padding: 15px; background: #e3f2fd;">Item 3</div>
-|}
+</div>
-= 1.叫猫起床的方式～弹蛋蛋！ <font color=white>王二和咪咪</font> [https://www.bilibili.com/video/BV1UE42137HH 链接] =
+Use flex-direction: column for vertical alignment:
-[[File:弹蛋蛋1.gif]][[File:弹蛋蛋2.gif]][[File:弹蛋蛋3.gif]][[File:弹蛋蛋4.gif]][[File:弹蛋蛋5.gif]]
+<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>
-= 2.大蛋猫又出来营业了！ <font color=white>王二和咪咪</font> [https://www.bilibili.com/video/BV1qM4m1z7Ec 链接] =
+Center-align items vertically and horizontally:
-[[File:大蛋猫1.gif]][[File:大蛋猫2.gif]][[File:大蛋猫3.gif]][[File:大蛋猫4.gif]][[File:大蛋猫5.gif]]
+<div style="display: flex; justify-content: center; align-items: center; height: 200px; border: 1px dashed #ccc;">
+  <div>Centered Content</div>
+</div>
-= 3.橘猫：该我弹你了吧！ <font color=white>王二和咪咪</font> [https://www.bilibili.com/video/BV1En1xYsEP3 链接] =
+Create a reusable template (e.g., Template:FlexContainer):
-[[File:我弹你了吧1.gif]][[File:我弹你了吧2.gif]][[File:我弹你了吧3.gif]][[File:我弹你了吧4.gif]][[File:我弹你了吧5.gif]]
+<includeonly>
+<div style="display: flex; gap: {{{gap|10px}}}; flex-wrap: {{{wrap|nowrap}}}; margin: {{{margin|10px 0}}};">
+  {{{1}}}
+</div>
+</includeonly>
-= 4.一指弹大师上场！ <font color=white>王二和咪咪</font> [https://www.bilibili.com/video/BV1ZgDEY2EYT 链接] =
+Usage in a page:
-[[File:指弹大师1.gif]][[File:指弹大师2.gif]][[File:指弹大师3.gif]][[File:指弹大师4.gif]][[File:指弹大师5.gif]]
+{{FlexContainer|wrap=wrap|gap=20px|
+  <div style="flex: 1;">A</div>
-= 5.倒也不是好色 <font color=white>王二和咪咪</font> [https://www.bilibili.com/video/BV1MLm2YKEHT 链接] =
+  <div style="flex: 1;">B</div>
-[[File:不是好色1.gif]][[File:不是好色2.gif]][[File:不是好色3.gif]][[File:不是好色4.gif]][[File:不是好色5.gif]]
+}}
-= 6.刚到货的木鱼声音不太对 <font color=white>积架与咪</font> [https://www.bilibili.com/video/BV1yT421k7dn 链接] =
-[[File:木鱼声音1.gif]][[File:木鱼声音2.gif]][[File:木鱼声音3.gif]][[File:木鱼声音4.gif]][[File:木鱼声音5.gif]]
-= 7.喵：坏了！我蛋蛋没感觉了！ <font color=white>积架与咪</font> [https://www.bilibili.com/video/BV19x4y1S758 链接] =
-[[File:蛋蛋没感觉1.gif]][[File:蛋蛋没感觉2.gif]][[File:蛋蛋没感觉3.gif]][[File:蛋蛋没感觉4.gif]][[File:蛋蛋没感觉5.gif]]
-= 8.小猫咪终于实现了嗞尿自由 <font color=white>积架与咪</font> [https://www.bilibili.com/video/BV1WM4y1B7Gg 链接] =
-[[File:嗞尿自由1.gif]][[File:嗞尿自由2.gif]][[File:嗞尿自由3.gif]][[File:嗞尿自由4.gif]][[File:嗞尿自由5.gif]]
-= 9.扒拉猫咪的蛋蛋 <font color=white>猫咪的快乐星球</font> [https://www.bilibili.com/video/BV1qQ4y1X7kd/ 链接] =
-[[File:猫咪的蛋蛋1.gif]][[File:猫咪的蛋蛋2.gif]][[File:猫咪的蛋蛋3.gif]][[File:猫咪的蛋蛋4.gif]][[File:猫咪的蛋蛋5.gif]]
-= 10.沉浸式玩猫卵子 <font color=white>安定定大魔玉</font> [https://www.bilibili.com/video/BV1Kh4y1D7X4/ 链接] =
-[[File:玩猫卵子1.gif]][[File:玩猫卵子2.gif]][[File:玩猫卵子3.gif]][[File:玩猫卵子4.gif]][[File:玩猫卵子5.gif]]

Test：修订间差异

2025年2月23日 (日) 19:14的最新版本

导航菜单

搜索