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>