Template:Flexbox/testcases

ここは、Template:Flexboxのサンドボックス・サブページに対応したテンプレート・テストケースです。
右のボタンをクリックするとテストケースが更新されます。

更なる情報とオプション

このページに複雑なテンプレートの使用例を多く記述した場合、MediaWikiの制限によりページの終端部周辺で誤動作を起こす可能性があります。この誤動作が発生した場合、発生したページのソースに追加された「NewPP limit report」というコメントを参照してください。

また、特別:テンプレートを展開でテンプレートの使用結果を実験することも出来ます。このページを表示する外装を変更する:

テストケース更新

テスト
ケース
更新

デフォルト

『近江名所図』（狩野派、16世紀後半）

『近江名所図』（17世紀前半）

<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

『近江名所図』（狩野派、16世紀後半）

『近江名所図』（17世紀前半）

<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

『近江名所図』（狩野派、16世紀後半）

『近江名所図』（17世紀前半）

<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

『近江名所図』（狩野派、16世紀後半）

『近江名所図』（17世紀前半）

<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

『近江名所図』（狩野派、16世紀後半）

『近江名所図』（17世紀前半）

<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

『近江名所図』（狩野派、16世紀後半）

『近江名所図』（17世紀前半）

<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

『近江名所図』（狩野派、16世紀後半）

『近江名所図』（17世紀前半）

<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

『近江名所図』（狩野派、16世紀後半）

『近江名所図』（17世紀前半）

<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

『近江名所図』（狩野派、16世紀後半）

『近江名所図』（17世紀前半）

<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

『近江名所図』（狩野派、16世紀後半）

『近江名所図』（17世紀前半）

<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

『近江名所図』（狩野派、16世紀後半）

『近江名所図』（17世紀前半）

<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

『近江名所図』（狩野派、16世紀後半）

『近江名所図』（17世紀前半）

<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

『近江名所図』（狩野派、16世紀後半）

『近江名所図』（17世紀前半）

<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

『近江名所図』（狩野派、16世紀後半）

『近江名所図』（17世紀前半）

<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

『近江名所図』（狩野派、16世紀後半）

『近江名所図』（17世紀前半）

<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

『近江名所図』（狩野派、16世紀後半）

『近江名所図』（17世紀前半）

<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

『近江名所図』（狩野派、16世紀後半）

『近江名所図』（17世紀前半）

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