Test：修订间差异

来自PD2汉化wiki
跳转到导航 跳转到搜索
←上一编辑
可视化wikitext
Lil174​（留言 | 贡献）
18,714次编辑
无编辑摘要
Lil174​（留言 | 贡献）
18,714次编辑
无编辑摘要
 
（未显示同一用户的110个中间版本）
第1行： 第1行：
原始28px: [[File:RuneEl.png]][[File:RuneEld.png]][[File:RuneTir.png]][[File:RuneNef.png]][[File:RuneEth.png]][[File:RuneIth.png]][[File:RuneTal.png]][[File:RuneRal.png]][[File:RuneOrt.png]][[File:RuneThul.png]][[File:RuneAmn.png]][[File:RuneSol.png]][[File:RuneShael.png]]<br>
Create a horizontal layout with flexible boxes:
压制28px: [[File:El.png|28px]][[File:Eld.png|28px]][[File:Tir.png|28px]][[File:Nef.png|28px]][[File:Eth.png|28px]][[File:Ith.png|28px]][[File:Tal.png|28px]][[File:Ral.png|28px]][[File:Ort.png|28px]][[File:Thul.png|28px]][[File:Amn.png|28px]][[File:Sol.png|28px]][[File:Shael.png|28px]]<br>
<div style="display: flex; gap: 10px; margin: 10px 0;">
压制30px: [[File:El.png|30px]][[File:Eld.png|30px]][[File:Tir.png|30px]][[File:Nef.png|30px]][[File:Eth.png|30px]][[File:Ith.png|30px]][[File:Tal.png|30px]][[File:Ral.png|30px]][[File:Ort.png|30px]][[File:Thul.png|30px]][[File:Amn.png|30px]][[File:Sol.png|30px]][[File:Shael.png|30px]]<br>
  <div style="flex: 1; padding: 10px; background: #f0f0f0; border-radius: 5px;">Box 1</div>
原始36px: [[File:El.png]][[File:Eld.png]][[File:Tir.png]][[File:Nef.png]][[File:Eth.png]][[File:Ith.png]][[File:Tal.png]][[File:Ral.png]][[File:Ort.png]][[File:Thul.png]][[File:Amn.png]][[File:Sol.png]][[File:Shael.png]]
  <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>
}}

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

检索自“https://wiki.projectdiablo2.cn/w/index.php?title=Test&oldid=21574”