Test：修订间差异
跳转到导航
跳转到搜索
无编辑摘要 |
无编辑摘要 |
||
| （未显示同一用户的33个中间版本） | |||
| 第1行： | 第1行： | ||
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> | |||
}} | |||
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