テンプレート:Flexbox/testcases

デフォルト

『近江名所図』（狩野派、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

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>

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;align-items: 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;align-items: flex-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;align-items: center;gap: 0 1em;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box">...</div>

baseline

『近江名所図』（狩野派、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: 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

『近江名所図』（狩野派、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-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

『近江名所図』（狩野派、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-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

『近江名所図』（狩野派、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-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

『近江名所図』（狩野派、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-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

『近江名所図』（狩野派、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-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

『近江名所図』（狩野派、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-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

『近江名所図』（狩野派、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-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

『近江名所図』（狩野派、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: 10em 1em;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box">...</div>

|direction=column|style=height: 800px;

『近江名所図』（狩野派、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: 10em 1em;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;height: 800px;">...</div>

force-row-legacy

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

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

<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

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

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

<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

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

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

<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

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

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

<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

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

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

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