|
|
| 第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> |
| | 示例 || 示例 || 示例
| |
| |-
| |
| | 示例 || 示例 || 示例
| |
| |}
| |
| <templatestyles src="Template:首页/styles.css" /> | |
|
| |
|
| <gallery> | | Items wrap on smaller screens and have a minimum width: |
| CD.gif|说明1
| | <div style="display: flex; flex-wrap: wrap; gap: 15px; justify-content: center;"> |
| CD.gif|说明2
| | <div style="flex: 1 1 250px; padding: 15px; background: #e3f2fd;">Item 1</div> |
| CD.gif|说明3
| | <div style="flex: 1 1 250px; padding: 15px; background: #e3f2fd;">Item 2</div> |
| </gallery> | | <div style="flex: 1 1 250px; padding: 15px; background: #e3f2fd;">Item 3</div> |
| | </div> |
|
| |
|
| <div style="white-space: pre-wrap;">这 是 保留空格的文本</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> |
|
| |
|
| {{tab}}123 | | 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> |
|
| |
|
| <ref name="Rathma">拉斯玛</ref>
| | Usage in a page: |
| | | {{FlexContainer|wrap=wrap|gap=20px| |
| <poem>
| | <div style=" flex: 1;"> A</div> |
| A stately pleasure-dome decree:[[File:123.png]]
| | <div style=" flex: 1;"> B</div> |
| Where Alph, the sacred river, ran
| | }} |
| Through caverns measureless to man
| |
| Down to a sunless sea.
| |
| | |
| So twice five miles of fertile ground
| |
| With walls and towers were girdled round:
| |
| And there were gardens bright with sinuous rills,
| |
| Where blossomed many an incense-bearing tree;
| |
| And here were forests ancient as the hills,
| |
| Enfolding sunny spots of greenery.
| |
| </poem>
| |
| | |
| <center>
| |
| LU左上 <div class="tooltip-wrapper">[[File:田字图.png|64px]]<div class="tooltip-content-lu">[[File:田字图.png|128px]]</div></div>
| |
| UC上中 <div class="tooltip-wrapper">[[File:田字图.png|64px]]<div class="tooltip-content-uc">[[File:田字图.png|128px]]</div></div>
| |
| RU右上 <div class="tooltip-wrapper">[[File:田字图.png|64px]]<div class="tooltip-content-ru">[[File:田字图.png|128px]]</div></div>
| |
| <br>
| |
| LC左中 <div class=" tooltip-wrapper">[[File: 田字图.png|64px]]<div class="tooltip-content-lc"> [[File:田字图.png|128px]]</div></div> | |
| CC中中 <div class=" tooltip-wrapper">[[File: 田字图.png|64px]]<div class=" tooltip-content-cc">[[File:田字图.png|128px]]</div></div> | |
| RC右中 <div class="tooltip-wrapper">[[File:田字图.png|64px]]<div class="tooltip-content-rc">[[File:田字图.png|128px]]</div></div>
| |
| <br>
| |
| LB左下 <div class="tooltip-wrapper">[[File:田字图.png|64px]]<div class="tooltip-content-lb">[[File:田字图.png|128px]]</div></div>
| |
| BC下中 <div class="tooltip-wrapper">[[File:田字图.png|64px]]<div class="tooltip-content-bc">[[File:田字图.png|128px]]</div></div>
| |
| RB右下 <div class="tooltip-wrapper">[[File:田字图.png|64px]]<div class="tooltip-content-rb">[[File:田字图.png|128px]]</div></div>
| |
| </center>
| |
| | |
| | |
| | |
| {{tipCC|:::::::::::::::::::::::::[[File:田字图.png|64px]]|{{Special:IframePage/bilib|path=?bvid=BV1s14y117k2&autoplay=false}}}}
| |