查看“︁Test”︁的源代码

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>

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>
}}