Template:Flexbox start/testcases
ここは、Template:Flexbox startのサンドボックス・サブページに対応したテンプレート・テストケースです。 右のボタンをクリックするとテストケースが更新されます。 更なる情報とオプション このページに複雑なテンプレートの使用例を多く記述した場合、MediaWikiの制限によりページの終端部周辺で誤動作を起こす可能性があります。この誤動作が発生した場合、発生したページのソースに追加された「NewPP limit report」というコメントを参照してください。
また、特別:テンプレートを展開でテンプレートの使用結果を実験することも出来ます。 このページを表示する外装を変更する: |
デフォルト[編集]
<div class="tpl-flexbox" style="display: -ms-flexbox; display: flex;flex-direction: column;-ms-flex-flow: row wrap;flex-flow: row wrap;gap: 0 1em;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box" >...</div>
direction[編集]
row[編集]
<div class="tpl-flexbox" style="display: -ms-flexbox; display: flex;flex-direction: column;-ms-flex-flow: row wrap;flex-flow: row wrap;gap: 0 1em;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box" >...</div>
row-reverse[編集]
<div class="tpl-flexbox" style="display: -ms-flexbox; display: flex;flex-direction: column;-ms-flex-flow: row wrap;flex-flow: row wrap;gap: 0 1em;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box" >...</div>
column[編集]
<div class="tpl-flexbox" style="display: -webkit-box;display: -ms-flexbox; display: flex;-webkit-box-orient: vertical;flex-direction: column;-ms-flex-flow: column wrap;flex-flow: column wrap;gap: 0 1em;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box" >...</div>
column-reverse[編集]
<div class="tpl-flexbox" style="display: -webkit-box;display: -ms-flexbox; display: flex;-webkit-box-orient: vertical;-webkit-box-direction: reverse;flex-direction: reverse;-ms-flex-flow: column-reverse wrap;flex-flow: column-reverse wrap;gap: 0 1em;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box" >...</div>
wrap[編集]
wrap[編集]
<div class="tpl-flexbox" style="display: -ms-flexbox; display: flex;flex-direction: column;-ms-flex-flow: row wrap;flex-flow: row wrap;gap: 0 1em;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box" >...</div>
wrap-reverse[編集]
<div class="tpl-flexbox" style="display: -ms-flexbox; display: flex;flex-direction: column;-ms-flex-flow: row wrap-reverse;flex-flow: row wrap-reverse;gap: 0 1em;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box" >...</div>
nowrap[編集]
<div class="tpl-flexbox" style="display: -ms-flexbox; display: flex;flex-direction: column;-ms-flex-flow: row nowrap;flex-flow: row nowrap;gap: 0 1em;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box" >...</div>
justify-content[編集]
flex-start[編集]
<div class="tpl-flexbox" style="display: -ms-flexbox; display: flex;flex-direction: column;-ms-flex-flow: row wrap;flex-flow: row wrap;-ms-flex-align: x-start;justify-content: flex-start;gap: 0 1em;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box" >...</div>
flex-end[編集]
<div class="tpl-flexbox" style="display: -ms-flexbox; display: flex;flex-direction: column;-ms-flex-flow: row wrap;flex-flow: row wrap;-ms-flex-align: x-end;justify-content: flex-end;gap: 0 1em;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box" >...</div>
start[編集]
<div class="tpl-flexbox" style="display: -ms-flexbox; display: flex;flex-direction: column;-ms-flex-flow: row wrap;flex-flow: row wrap;-ms-flex-align: start;justify-content: flex-start;justify-content: start;gap: 0 1em;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box" >...</div>
end[編集]
<div class="tpl-flexbox" style="display: -ms-flexbox; display: flex;flex-direction: column;-ms-flex-flow: row wrap;flex-flow: row wrap;-ms-flex-align: end;justify-content: flex-end;justify-content: end;gap: 0 1em;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box" >...</div>
center[編集]
<div class="tpl-flexbox" style="display: -ms-flexbox; display: flex;flex-direction: column;-ms-flex-flow: row wrap;flex-flow: row wrap;-ms-flex-align: center;justify-content: center;gap: 0 1em;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box" >...</div>
space-between[編集]
<div class="tpl-flexbox" style="display: -ms-flexbox; display: flex;flex-direction: column;-ms-flex-flow: row wrap;flex-flow: row wrap;-ms-flex-align: justify;justify-content: space-between;gap: 0 1em;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box" >...</div>
space-around[編集]
<div class="tpl-flexbox" style="display: -ms-flexbox; display: flex;flex-direction: column;-ms-flex-flow: row wrap;flex-flow: row wrap;-ms-flex-align: justify;justify-content: space-around;gap: 0 1em;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box" >...</div>
space-evenly[編集]
<div class="tpl-flexbox" style="display: -ms-flexbox; display: flex;flex-direction: column;-ms-flex-flow: row wrap;flex-flow: row wrap;-ms-flex-align: justify;justify-content: space-around;justify-content: space-evenly;gap: 0 1em;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box" >...</div>
align-items[編集]
stretch[編集]
<div class="tpl-flexbox" style="display: -ms-flexbox; display: flex;flex-direction: column;-ms-flex-flow: row wrap;flex-flow: row wrap;-ms-flex-align: stretch;align-items: stretch;gap: 0 1em;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box" >...</div>
flex-start[編集]
<div class="tpl-flexbox" style="display: -ms-flexbox; display: flex;flex-direction: column;-ms-flex-flow: row wrap;flex-flow: row wrap;-ms-flex-align: x-start;align-items: flex-start;gap: 0 1em;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box" >...</div>
flex-end[編集]
<div class="tpl-flexbox" style="display: -ms-flexbox; display: flex;flex-direction: column;-ms-flex-flow: row wrap;flex-flow: row wrap;-ms-flex-align: x-end;align-items: flex-end;gap: 0 1em;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box" >...</div>
center[編集]
<div class="tpl-flexbox" style="display: -ms-flexbox; display: flex;flex-direction: column;-ms-flex-flow: row wrap;flex-flow: row wrap;-ms-flex-align: center;align-items: center;gap: 0 1em;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box" >...</div>
baseline[編集]
<div class="tpl-flexbox" style="display: -ms-flexbox; display: flex;flex-direction: column;-ms-flex-flow: row wrap;flex-flow: row wrap;-ms-flex-align: baseline;align-items: baseline;gap: 0 1em;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box" >...</div>
align-content + style[編集]
stretch[編集]
<div class="tpl-flexbox" style="display: -ms-flexbox; display: flex;flex-direction: column;-ms-flex-flow: row wrap;flex-flow: row wrap;-ms-flex-line-pack: stretch;align-content: stretch;gap: 0 1em;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;border: 1px dashed #888; height: 1000px;" >...</div>
flex-start[編集]
<div class="tpl-flexbox" style="display: -ms-flexbox; display: flex;flex-direction: column;-ms-flex-flow: row wrap;flex-flow: row wrap;-ms-flex-line-pack: x-start;align-content: flex-start;gap: 0 1em;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;border: 1px dashed #888; height: 1000px;" >...</div>
flex-end[編集]
<div class="tpl-flexbox" style="display: -ms-flexbox; display: flex;flex-direction: column;-ms-flex-flow: row wrap;flex-flow: row wrap;-ms-flex-line-pack: x-end;align-content: flex-end;gap: 0 1em;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;border: 1px dashed #888; height: 1000px;" >...</div>
center[編集]
<div class="tpl-flexbox" style="display: -ms-flexbox; display: flex;flex-direction: column;-ms-flex-flow: row wrap;flex-flow: row wrap;-ms-flex-line-pack: center;align-content: center;gap: 0 1em;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;border: 1px dashed #888; height: 1000px;" >...</div>
space-between[編集]
<div class="tpl-flexbox" style="display: -ms-flexbox; display: flex;flex-direction: column;-ms-flex-flow: row wrap;flex-flow: row wrap;-ms-flex-line-pack: justify;align-content: space-between;gap: 0 1em;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;border: 1px dashed #888; height: 1000px;" >...</div>
space-around[編集]
<div class="tpl-flexbox" style="display: -ms-flexbox; display: flex;flex-direction: column;-ms-flex-flow: row wrap;flex-flow: row wrap;-ms-flex-line-pack: distribute;align-content: space-around;gap: 0 1em;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;border: 1px dashed #888; height: 1000px;" >...</div>
space-evenly[編集]
<div class="tpl-flexbox" style="display: -ms-flexbox; display: flex;flex-direction: column;-ms-flex-flow: row wrap;flex-flow: row wrap;-ms-flex-line-pack: space-evenly;align-content: space-around;align-content: space-evenly;gap: 0 1em;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;border: 1px dashed #888; height: 1000px;" >...</div>
gap[編集]
|direction=row[編集]
<div class="tpl-flexbox" style="display: -ms-flexbox; display: flex;flex-direction: column;-ms-flex-flow: row wrap;flex-flow: row wrap;gap: 10em 1em;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box" >...</div>
|direction=column|style=height: 800px;[編集]
<div class="tpl-flexbox" style="display: -webkit-box;display: -ms-flexbox; display: flex;-webkit-box-orient: vertical;flex-direction: column;-ms-flex-flow: column wrap;flex-flow: column wrap;gap: 10em 1em;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;height: 800px;" >...</div>
force-row-legacy[編集]
<div class="tpl-flexbox" style="display: -webkit-box;display: -ms-flexbox; display: flex;-webkit-box-orient: horizontal;-webkit-box-direction: reverse;flex-direction: row-reverse;-ms-flex-flow: row wrap;flex-flow: row wrap;gap: 0 1em;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box" >...</div>
direction=row[編集]
<div class="tpl-flexbox" style="display: -webkit-box;display: -ms-flexbox; display: flex;-webkit-box-orient: horizontal;flex-direction: row;-ms-flex-flow: row wrap;flex-flow: row wrap;gap: 0 1em;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box" >...</div>
direction=row-reverse[編集]
<div class="tpl-flexbox" style="display: -webkit-box;display: -ms-flexbox; display: flex;-webkit-box-orient: horizontal;-webkit-box-direction: reverse;flex-direction: row-reverse;-ms-flex-flow: row wrap;flex-flow: row wrap;gap: 0 1em;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box" >...</div>
justify-content[編集]
<div class="tpl-flexbox" style="display: -webkit-box;display: -ms-flexbox; display: flex;-webkit-box-orient: horizontal;-webkit-box-direction: reverse;flex-direction: row-reverse;-ms-flex-flow: row wrap;flex-flow: row wrap;-webkit-box-align: justify;-ms-flex-align: justify;justify-content: space-around;gap: 0 1em;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box" >...</div>
align-items[編集]
<div class="tpl-flexbox" style="display: -webkit-box;display: -ms-flexbox; display: flex;-webkit-box-orient: horizontal;-webkit-box-direction: reverse;flex-direction: row-reverse;-ms-flex-flow: row wrap;flex-flow: row wrap;-webkit-box-align: justify;-ms-flex-align: justify;justify-content: space-around;gap: 0 1em;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box" >...</div>