css-flexbox-ja.html

<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8">
<title>CSS Flexible Box Layout Module Level 1 （日本語訳）</title>

<link rel="stylesheet" href="common.css" type="text/css">
<link rel="stylesheet" href="common-css.css" type="text/css">


<!--%style （例示用）-->
<style>
.code-and-figure {
	display: table;
	margin: 0 auto;
	border-spacing: 1em;
}
.code-and-figure > div {
	display: table-cell;
	vertical-align: middle;
}

/* Overview catalog example */
#_dgm-overview-example {
	background: white;
	color: black;
	display: table;
	margin: 0 auto 1em;
	border-spacing: .5em 0;
	min-width: 672px;
}
#_dgm-overview-example > ._col {
	display: table-column;
	background: hsl(60 100% 90%);
}
#_dgm-overview-example > ._desc {
	display: table-cell;
	vertical-align: top;
	width: 300px;
	padding: 1em 1em 0;
	text-align: left;
	border: thick solid hsl(60 80% 50%);
	border-radius: 1em 1em 0 0;
	border-bottom: none;
}
#_dgm-overview-example > ._desc > img {
	margin: 0 auto;
	display: block;
}
#_dgm-overview-example > ._desc > h1 {
	background: transparent;
}
#_dgm-overview-example > ._buttons {
	display: table-row;
}
#_dgm-overview-example > ._buttons > div {
	display: table-cell;
	border: thick solid hsl(60 80% 50%);
	border-radius: 0 0 1em 1em;
	border-top: none;
	text-align: center;
}
#_dgm-overview-example button {
	background-color: hsl(120 100% 40%);
	border: medium inset hsl(120 70% 40%);
	border-radius: 1em;
	padding: .5em;
	font-weight: bold;
	color: white;
	font-size: 1.6em;
	cursor: pointer;
	width: 90%;
	margin: 1em auto;
}

/* Visibility: Collapse example */
#_ex-visibility-collapse {
	background: white;
	color: black;
	box-shadow: 3px 3px 10px #333;
	display: table;
	width: 100%;
}
#_ex-visibility-collapse > article,
#_ex-visibility-collapse > nav {
	display: table-cell;
}
#_ex-visibility-collapse > article {
	width: 100%;
	padding-left:0.5em;
}
#_ex-visibility-collapse ul,
#_ex-visibility-collapse li {
	list-style: none;
	margin: 0;
	padding: 0;
}
#_ex-visibility-collapse > nav > ul {
	background: #444;
	border-radius: 0.5em;
	padding: 0.075em;
}
#_ex-visibility-collapse li {
	padding: 0 0.5em;
	background: #ddd;
	color: black;
	border-radius: 0.40em;
	border: #444 solid 0.075em;
}
#_ex-visibility-collapse li li {
	background: #444;
	color: white;
	margin: 0 -0.5em;
	border-radius: 0;
}
#_ex-visibility-collapse li li:first-child {
	border-radius: 0.375em 0.375em 0 0;
}
#_ex-visibility-collapse a {
	background: transparent;
	color: inherit;
}
#_ex-visibility-collapse > nav > ul > li:target,
#_ex-visibility-collapse > nav > ul > li:hover {
	background: #888;
	color: white;
}
#_ex-visibility-collapse > nav > ul > li:not(:target):not(:hover) > ul {
	height: 0;
	overflow: hidden;
}

#_dgm-auto-bar {
	background: #ddd;
	color: black;
	overflow: hidden;
	padding: .25em 1em;
	list-style: none ;
	margin: 0;
	border-radius: .3em;
}
#_dgm-auto-bar > li {
	float: left;
	margin: 0;
	list-style: none ; /* 追加 */
}
#_dgm-auto-bar > li:first-child:after,
#_dgm-auto-bar > li:first-child + li:after {
	content: " |  ";
	white-space: pre;
}
#_dgm-auto-bar > li > a {
	display: inline-block;
	padding: 0 .25em;
	border-radius: .3em;
}
#_dgm-auto-bar > li > a:not(:hover):not(:focus) {
	text-decoration: none;
}
#_dgm-auto-bar > li > a:hover {
	color: #ddd;
	background: #444;
}


#_dgm-cross-auto-figure > div > div {
	background: #888;
	color: black;
	border: 1px solid transparent;
	margin: 0 auto;
	width: 70px;
	padding: 0 .5em;
	border-radius: 1em;
}
#_dgm-cross-auto-figure > div > div > div {
	border-spacing: 0;
	display: table;
	background: #ddd;
	text-align: center;
	margin: .5em auto;
	padding: .5em;
	border-radius: .5em;
}

#_dgm-flex-pack > div {
	background: gray;
	color: black;
	border: solid 2px gray;
	margin-top: 2px;
	width: 500px;
	height: 45px;
	line-height: 50px;
	position: relative;
	text-align: center;
	font-family: monospace;
}

#_dgm-flex-pack > div > div {
	position: absolute;
	top:0;
	bottom:0;
}
#_dgm-flex-pack > div > div:nth-child(1) {
	width:98px;
	background:#fcc;
}
#_dgm-flex-pack > div > div:nth-child(2) {
	width:78px;
	background:#cfc;
}
#_dgm-flex-pack > div > div:nth-child(3) {
	width:198px;
	background:#ccf;
}

#_dgm-flex-pack > div > div:nth-child(4) {
	left:0;
	right:0;
	background:transparent;
	color: black;
	font-size: 30px;
}


#_dgm-align-content-example > div {
	background: gray;
	color: black;
	border: solid gray 2px;
	display: inline-block;
	width: 200px;
	height: 250px;
	position: relative;
	text-align: center;
	font-family: monospace;
}

#_dgm-align-content-example > div > div {
	position: absolute;
	left:0;
	right:0;
	height:50px;
	background: url("data:image/png;base64,\
iVBORw0KGgoAAAANSUhEUgAAAFAAAAAyAgMAAAC2Q7RvAAAABGdBTUEAALGPC/xh\
BQAAAAFzUkdCAK7OHOkAAAAJUExURf/MzM3M/8z+zURRUVcAAAAaSURBVDjLY2AA\
glVgEAoHDKOCo4KjgiNbEABLjm1MVvs8tQAAAABJRU5ErkJggg==");
}
#_dgm-align-content-example > div > div:nth-child(1) {
	
}
#_dgm-align-content-example > div > div:nth-child(2) {
	background-position: left 40px top 0;
}
#_dgm-align-content-example > div > div:nth-child(3) {
	background-size: 100px 50px;
}
#_dgm-align-content-example > div > div:nth-child(4) {
	font-size: 24px;
	top:112px;
	background: transparent;
}


#_dgm-flex-align > div {
	background: #AAA;
	color: black;
	border: solid gray 2px;
	display: inline-block;
	width: 45%;
	height: 6rem;
	margin-right: 1%;
	position: relative;
	text-align: center;
	font-family: monospace;
}

#_dgm-flex-align > div > div {
	position: absolute;
	left:0;
	right:0;
	white-space: nowrap;
	overflow: hidden;
	line-height: 1em;
}

#_dgm-flex-align > div > div:nth-child(1) {
	background: #fcf;
	height: 5rem;
	left: 0%;
	width: 20%;
}
#_dgm-flex-align > div > div:nth-child(2) {
	background: #cfc;
	height: 3rem;
	left: 20%;
	width: 16%;
}
#_dgm-flex-align > div > div:nth-child(3) {
	background: #ccf;
	height: 4rem;
	left: 36%;
	width: 40%;
}
#_dgm-flex-align > div > div:nth-child(4) {
	background: #cff;
	height: 6rem;
	left: 76%;
	width: 24%;
}
#_dgm-flex-align > div > div:nth-child(5) {
	font-size: 2rem;
	top:2.3rem;
	background: transparent;
}

#_dgm-flex-align > div > div > div {
	border-bottom: dashed black 1px;
	line-height:0.9em;
	position: absolute;
	text-align: left;
	color: gray;
}


.flex-flow {
	background: var(--deep-color);
	color: var(--W-color);
	border: solid var(--deep-color) 3px;
	border-radius: 6px;
	position: relative;
	font-family: sans-serif;
	font-size: 30px;
	text-align: center;
	line-height: 40px;
}

.flex-flow > div {
	position: absolute;
	width: 40px;
	height: 40px;
	border-radius: 3px;
	background: var(--dim-color);
}

.flex-flow.横組 > div:nth-child(2) {
	width: 50px;
}
.flex-flow.横組 > div:nth-child(4) {
	width: 60px;
}
.flex-flow.縦組 > div:nth-child(2) {
	height: 50px;
	line-height: 50px;
}
.flex-flow.縦組 > div:nth-child(4) {
	height: 60px;
	line-height: 60px;
}

#_dgm-flex-order-page {
	width:360px;
	height:300px;
	font-family: monospace;
	font-size: 18px;
}

#_dgm-flex-order-page > div {
	top:50px; bottom:50px;
	left:0; right:0;
	position: absolute;
	height:auto;
	width:auto;
}

#_dgm-multiline-flex > div {
	width: 93px;
}
#_dgm-multiline-no-flex > div {
	width: 77px;
}

.rel-vs-abs {
	margin: 10px;
	height: 4.5em;
}

.rel-vs-abs > div {
	background: var(--dim-color);
	position: relative;
	border: solid 3px var(--dim-color);
	border-radius: 6px;
	text-align: center;
	width: calc(25em + 6px) ;
	height: 1.8em;
	font-family: sans-serif;
	line-height: 1.8em;
}

.rel-vs-abs > div > div {
	position: absolute;
	height: 1.8em;
	border-radius: 3px;
	background: var(--pale-color);
}

.rel-vs-abs > div > div > div {
	position: absolute;
	top:calc( 1.8em + 6px );
	height: 0.6em;
	left:0px;
	right:0px;
	border: solid 2px var(--K-color);
	border-top: 0;
	line-height: 3em;
}

/* flex-direction-terms */
._dt-axis { color: var(--R-color); }
._dt-side { color: var(--B-color); }
._dt-size { color: var(--G-color); }

#flex-direction-terms text {
	fill: currentcolor;
	stroke: none;
}
#flex-direction-terms path {
	stroke: currentcolor;
	fill: none;
}

#_dgm-flex-item-determination {
	background: var(--deep-color);
	color: var(--W-color);
	border: solid 3px var(--deep-color);
	border-radius: 6px;
	display: inline-block;
	white-space: nowrap;
}
#_dgm-flex-item-determination > div {
	margin-right: 3px;
	padding: 0 3px;
	border-radius: 3px;
	background: var(--dim-color);
	display: inline-block;
	vertical-align: top;
}

</style>

<!--%style -->
<style>
.axis-mapping td,
.axis-mapping > thead th {
	white-space: nowrap;
}

.matrix td, .matrix th {
	border: solid 1px var(--table-rule-color);
}

.css {
	white-space: nowrap;
}

</style>


<script src="common0.js"></script>
<script src="common1.js" async></script>

<script>

Util.ready = function(){

	const source_data = {
		generate: expand,
	};

	Util.switchWordsInit(source_data);
}

function expand(){
	const class_map = this.class_map;
	const tag_map = this.tag_map;
	const link_map = this.link_map;

	return this.html.replace(
		/%[\w\-~一-鿆あ-ん]+|`(.+?)([$@\^])(\w*)(?::([\w\-]+))?/g,
		create_html
	);

	function create_html(match, key, indicator, klass, values){
if(values) console.log(values);

if(!indicator) {//%
	return `<var>${match.slice(1)}</var>`;
}

let href = '';
let href1 = '';
{
	const n = key.indexOf('＠');
	if(n > 0) {
		href1 = key.slice(n + 1);
		key = key.slice(0, n);
	}
}
let text = key;

switch(klass){
case 'r': // ref
	text = `[${key}]`;
	href = `#biblio-${key.toLowerCase()}`;
	break;
case 'pe': 
	text = `::${key}`;
	break;
case 'p':
	{
		const i = text.indexOf(':');
		if( i > 0 ){
			key = text.slice(0, i);
			text = `${key}: <code class="value">${text.slice(i+1)}</code>`;
		}
	}
	break;
case 't':
	text = `&lt;${key}&gt;`;
	key = key.replace(/\s*\[.+/, '');
	break;
case 'tp': // property value type
	text = `&lt;'<code class="property">${key}</code>'&gt;`;
	href = link_map[`p.${key}`];
	break;
case 'en':
	return `<span lang="en">${key}</span>`;
	break;
case 'dgm':
	return `<a id="_dgm-${key}">＊</a>`;
default:
}

let tag = tag_map[klass];
if(tag) {
	let classname = class_map[klass];
	classname = classname ? ` class="${classname}"` : '';
	text = `<${tag}${classname}>${text}</${tag}>`;
}

if(indicator !== '^'){
	href = href1 || link_map[ klass ? `${klass}.${key}` : key ] || href;
	if(!href){
		console.log(match); // check error
		return match;
	}

	switch(indicator){
	case '$':
		text = `<a href="${href}">${text}</a>`;
		break;
	case '@':
		text = `<dfn id="${href.slice(1)}">${text}</dfn>`;
		break;
	default:
		console.log(match);
		return match;
	}
}

return text;

	}
}


</script>


<script type="text/plain" id="_source_data">


●●options

spec_title:CSS Flexible Box Layout Module Level 1
spec_date:2025-03-10
trans_update:2025-03-12
source_checked:240809
page_state_key:CSS
original_url:https://drafts.csswg.org/css-flexbox-1/
spec_status:ED
ref_id_prefix:biblio-
ref_id_lowercase:true
site_nav:layouts,layout,css
conformance:css
copyright:2025,permissive
trans_1st_pub:2013-10-13


●●class_map
p:property
pe:pseudo
d:descriptor
v:value
vJ:value
vA:value
vC:value
t:type
tp:type
a:attr
op:op

●●tag_map
p:code
pe:code
d:code
v:code
vJ:code
vA:code
vC:code
t:var
tp:var
V:var
a:code
i:i
op:span
em:em

●●original_id_map

feedback:
valdef-flex-basis-auto:auto
valdef-flex-basis-content:content

●●mdn_urls
propdef-align-content:CSS/align-content
propdef-align-items:CSS/align-items
propdef-align-self:CSS/align-self
propdef-flex:CSS/flex
propdef-flex-basis:CSS/flex-basis
propdef-flex-direction:CSS/flex-direction
propdef-flex-flow:CSS/flex-flow
propdef-flex-grow:CSS/flex-grow
propdef-flex-shrink:CSS/flex-shrink
propdef-flex-wrap:CSS/flex-wrap
propdef-justify-content:CSS/justify-content

●●val_prop_map

	d:display
	f:flex
	fd:flex-direction
	fg:flex-grow
	fs:flex-shrink
fb:flex-basis
	fw:flex-wrap
	ff:flex-flow
	o:order
	j:justify-content
	ais:align-items
	as:align-self
	ac:align-content

●●words_table1

auto_v:<code class="value">auto</code> 
autoS:auto
autoB:auto

●●words_table

	●layout（次元／向き
主-:main-::~
	主-:main
主size:main-size::主 size:主サイズ
交叉-:cross-::~
	交叉-:cross
交叉size:cross-size::交叉 size:交叉サイズ
	交叉-~~方向:cross-wise
縦:vertical::~
縦方向:vertical::~
縦書き:vertical::~
横:horizontal::~
横方向:horizontal::~
横書き:horizontal::~
直交:orthogonal::~
垂直:perpendicular::~
平行:parallel::~
中央:center::~
	中央~寄せ:centered
	中央に寄せ:center
	中央~寄せ
	中央に据える:centering
	置く:place
	向き

左方:leftwards:~
右方:rightwards:~
下方:downwards:~
上方:upwards:~
一次元:linear:~
二次元:two-dimensional:~
	二次元:2D
	最も始端:startmost
	最も終端:endmost
	両端:either end

	●layout（分配／空間／整列
分配-:distribute::~
分配:distribution::~
	分配-法:distributing
分布-:distribute::~
矩形:rectangle::~

収まる:fitする::~
収まら:fitし::~
収まり:fitし::~
埋める:fillする:~
埋めら:fillさ:~
埋尽くし:fill upし:埋め尽くし
自由空間:free-space:::free 空間
部屋:room::~
	部屋が尽きる:no more room
間隔:spacing::~
合間:between:~
支柱:strut::~

縮短-:shrink::~
伸長-:grow::~
係数:factor::~

基底s:basis::基底
割合分:fraction::~
比率:ratio::~
接合-:flush するよう place:~
隣接な:adjacentな:隣接する
伸張-:stretch::~
総和:sum:~
吸収-:absorb:~
沿いの:方向の
沿いに:方向に
	沿い:along
clearance:
節減-:reduce:~

切詰めた:clampした:切り詰めた
切詰める:clampする:切り詰める
切詰めら:clampさ:切り詰めら
切詰め:clamping:切り詰め
切上げる:floorする:切り上げる
転換:transferred:~
基底線:baseline::~::ベースライン
合成-:synthesize::~
拡幅-:expand::~
押出され:pushされ:押し出され
押出す:pushする:押し出す
遭遇-:encounter:~
空間的:spatial:~
配列法:arrangement::~
再配列:rearrangement::~
並替える:reorderする::並び替える

	押しやられ:-
	force:押しやる
	引き上げ:pull
	揃え
	均等:evenly
	比例するよう:proportional
	比例分:proportion
	等しく／等量:equally
	等しい／等:equal
	等量:equal／equal amount
	~~区画:entry／entry box
	余った:extra
	残りの:remaining
	残された:leftover
	残された空間:space left
	空いた空間:empty space
	幅:wide
	負にならない所まで:down to, but not past, zero
	〜に寄せる:toward
	小さく:small
	幅の狭い:narrow
	~~長い:long
	半分:half
	離れた所:apart


固定-:fix::~
	~sizeが固定され:fixed-size
延伸-:extend::~
増大-:increase::~

折返す:wrapする::折り返す
折返ng:wrapping::折り返し
折返され:wrapされ::折り返され

相殺-:collapse::~
畳む:collapseする::~
畳める:collapseさせる::~
畳まれ:collapseされ::~
畳んだ:collapseした::~
	畳まれない／〜逆:uncollapse
	畳まれるかどうか:collapsed and uncollapsed
収納-:pack::~
	収納-法:packing
	消え去る:disappear する
	現れる:appear
	出現:appearing
	占める:takes up／-
	奪われ:stolen
	尽きた:ran out
	居残る:leaves behind
	伸縮可能
	伸縮~mode
	伸縮不可
	中段:middle
	狭い:narrowな

	●layout（flex
行f:line°::行°
駒:item:::アイテム

flexbox:
flex:
	~flexが効き過ぎた:over-flexed
	~flex~~処理:flexing
	~flex~~処理後の:post-flexing
	~flex可能:flexible
	~flex不能:inflexible
	~flex能:flexibility
	~flex~level:flex-level


	●layout（一般
	table-row:
	table-column:
	table-cell:
	~table状:tabular format
字l:letter::字°
	塊~容器
	包含している:containing
包装:wrapper::~
浮動体:float::~
浮動-:float::~
	静的~位置~用の:static-position
auto:
積層:stacking::~
堆積:stack::~
	積層／積まれて／
重合する:overlapする:重なり合う
溢れる:spillする:~
変形n:transformation::変形
	塊~layout:Block Layout

	●layout（アルゴリズム
再開始する:restartする:やり直す
	再び走らす:re-run
	飛ばす:skip
	先に進んで:skip past
補正-:fix:~
不定:indefinite::~
確定的:definite::~
	収集-済みでない:uncollected
	解決-法:resolving
	解決できない:unresolvable
供与:contribution::~
供与-:contribute::~
外在的:extrinsic::~
	固有の
縦横比:aspect ratio::~

最小-:min-::~
最大-:max-::~
	最~小:smallest
	最~大:largest
	max(:largest
	内容が収まる:fit-content
拡縮済み:scaled:~
昇格-:promote:~
完結-:finalize:~
循環な:cyclicな:循環する
変動:variance:~
線形:linear:~
補正:correction:~
発散-:explode:~
	近づいて発散する:explosive 〜
連続的:continuous:~
滑らか:smooth:~
二重-:double-:~
三重-:triple-:~

	和:sum
	~flow内:in-flow
	順方向:forward direction
	逆方向
	~PLUS:+
	~MUL:
	~MINUS:minus
	増加:incrementing
	合計:combined
	抜ける:exit
	やり直す:redo
	~~記録:note
	~restart:
	解消:fixing
	仮の:hypothetical

	●順序
	逆順:reverse
	z ~~方向の順序付け:z-ordering
	巡回-:cycling through

	●分断
強制d:forced::強制

	改行で折返され:broken onto a new line
	~~移動:shift
	~page割り:pagination
	~page割り:paginate
	~page先頭:top of the page

	●CSS
書字:writing::~
横組み:horizontal writing mode::~
縦組み:vertical writing mode::~
使用-:use::~
発話:speech::~
	speech rendering
塗ng:painting::塗り
塗られ:paintされ::~
実数:number:~
別名n:name alias::別名

	種類:type
	指定d値:as specified
	~group分け:grouping
	文書~空白:document white space characters

	●UI
action::::アクション
	~access可能にする:accessible
caption:
hover:
sidebar::::サイドバー
	タブ化された:tabbed
scroll::::スクロール
scrollport::::スクロール域
	下位~menu:submenu
	揺らがす:wobble
	触れ:intact
	隠す:hide
	操作中:target
	~~認識:perception

	●仕様
収容-:accommodate:~
注目-:focus:~
改良-:improve:~
誤解釈:misinterpretation:~
改正-:amend:~
release::::リリース
改得る:alter し得る:改め得る
参考:informative:~
自明:trivial:~
些細:trivial:~
理論:theory:~
	理論~的:theoretical
安定:stable:~
不安定:fragile:~
高価:expensive:~
高度な:advanced:~
表面的:superficial:~
完璧:perfect:~
欠点:drawback:~
道具:tool::~::ツール
条項:provisions:~
活動的:active::~::アクティブ
特典:bonus:~
宿題:exercise:~
力:power:~
排-:eliminate:~
複雑:complicated:~
組織化-:organize:~
短所:shortcoming:~
理想的:ideal:~
究明-:investigate:~
試験結果:experimentation:~

	単純さ:simplicity
	~~明確な:very explicit
	~~帰結 corollary
	この~~目的のため、:To this end,
	insanely ひどく
	~~主要な:major
	~~主要な:main
	単純なものも:simply
	適合していない:non-conforming
	作用:interacts with
	ある程度の制御を供する:exerts some control
	見込まれる:likely
	様に:like
	貫き続ける:stick to
	保つ:keep
	取って代わる:supersede
	可能にする:allow
	さほど関わり無く:without much regard
	定義する側面がある:defining aspect
	難解な詳細を理解する切迫した~~動機:deep-seated urge to understand arcane details
	補助:helps
	尊守-:honor
	^en:fall out
	重きが置かれる:biased-to
	詳細を与える:detailing
	~~述べ易く:easier to talk
	策定を遅らせ:slow down advancement
	注目を引く:compelling:
	損ない:ruin
	書かれ:written
	~~考慮-:with regards to
	感じられ:feel
	選ぶ:chose
	〜しないように:prevent
	示す:illustrates
	図示:illustration
	課される:imposed／subject to
	未使用の:unused
	呼ばれ／称され:called
	~~相当に:noticeably
	近く:close to
	〜に従う:per 〜
	~~主対象に:centric
	歪み:distortation
	好ましい:better
	足りない:insufficient
	感応する:sensitive
	イミを成し得る:sensible
	無用に:gratuitously
	分岐:dichotomy
	図:figure
	真の~~意味の:true
	due
	how
	like
	unlike
	wish
	-: ways
	-:designer
	きちんと:well-
	いきなり:suddenly
	より詳しい:more
	違える:differ
	気の利いた:intelligent
	年月に渡り:over the years
	様々な:many
	その引き換えに:In return
	同時に成り立つ:work together
	さらに踏み込んだ:more involved
	そのままだと:Leaving it at that
	までにとどめる:leave
	馬鹿げた結果:ridiculousness
	どうやってもできない:try to come up with 〜 you can’t, as far as we can tell.
	-:naively
	委ねる:Defers
	〜したいとする:designer’s intention is that
	結果的に:add up to
	どこまで:what extent
	歓迎:welcome
	近くなる:bring it closer

	●未分類
獲得-:acquire:~
展開-:expand:~
対応関係:mapping:~
	基になる:used to produce
再現-:reproduce:~
生きた:liveな:~
切替える:switchする:切り替える
入換わる:swapされる:入れ換わる
侵入-:intrude:~
前置-:precede:~
形状:shape:~

公式:formula:~
	counter:::カウンタ
hack::::ハック
近似:approximation:~

初期設定:initial setup:~
	側:side
代用:substitute:~

日本語:Japanese:~
英語:English:~
Farsi::ペルシャ語
	絶対値:magnitude／absolute value
等価性:equivalency:~
footer::::フッタ


	becomes
	cause
	causing
	come
	continue
	doesn’t
	ensure
	followed／following／follows
	従って:as follows
	gets
	going
	having
	makes
	means
	need
	seen
	using
	取り除く／外される:remove
	~~取得:retrieve
	別個:distinct
	-:deals
	得る:achieve
	得る:gains
	応じて:respond
	戻され:reverted … back
	戻る:return
	指す:refer
	欠く:lacks
	多量:large amounts
	終える／最後:finish
	結び付けられている:associated
	色分けされた:colored
	読み取れる:readable
	読む:read
	進む:proceed
	遅らせる:slow down
	先行する:preceding
	対応:respective
	属する:belong to
	leaving
	numbered
	served
	sketch
	test
	turn into
	beginning
	respecting
	振り分け直され:rebalance
	近づく:approach
	~~見出し:text
	~~見出し:title
	写真:photo
	目録:catalog
	部品:parts
	購入:purchase
	-:against
	〜を基準に:against
	time
	そのまま:raw
	bases
	数:number
	逆:reverse
	~~部分的:partway
	第二の:secondary
	後方の／~~後の:later
	最終的な:final
	-:final
	-:finally
	最終的にeventually
	種々の:various
	次の:next
	残りの部分:rest
	総／総じて:overall
	占める〜の~size:overall size
	総／合計:total
	それぞれ／同順:respectively
	ほぼ:mostly
	まだ:not already
	already
	以上の点:previous point
	just
	among
	besides
	ever
	most
	much
	neither
	none
	once
	onto
	のみ:only
	sole
	thereof
	under
	upon
	より大:larger
	より小:less than
	大きさ:large
	より大きい:larger
	以上の大きさ:or larger
	より小さい:smaller
	一部分:fraction
	今や:no longer
	別に:Aside
	反対／反対側:opposite
	同時に:together
	よく似:very similar
	渡る:across
	previously
	previous
	part
	whichever
	~~主に:mainly
	~~先行する:prior
	〜から:starting
	囲う:around
	片側または両側:at least one
	両側:these
	連続する:consecutive
	順次に:one by one
	周目:round
	少し:slightly
	ある:somewhat
	近くなった:underflow
	次第に:gradual
	満たない:less than
	-:amount
	-:small


●●link_map


	●p
p.align-content:#propdef-align-content
p.align-items:#propdef-align-items
p.align-self:#propdef-align-self
p.flex-basis:#propdef-flex-basis
p.flex-direction:#propdef-flex-direction
p.flex-flow:#propdef-flex-flow
p.flex-grow:#propdef-flex-grow
p.flex-shrink:#propdef-flex-shrink
p.flex-wrap:#propdef-flex-wrap
p.flex:#propdef-flex
p.justify-content:#propdef-justify-content
p.order:~CSSDISP#propdef-order

p.margin:~CSSBOX#propdef-margin
p.margin-left:~CSSBOX#propdef-margin-left
p.margin-top:~CSSBOX#propdef-margin-top
p.max-width:~SIZING#propdef-max-width
p.max-height:~SIZING#propdef-max-height
p.min-width:~SIZING#propdef-min-width
p.min-height:~SIZING#propdef-min-height

p.vertical-align:~CSSINLINE#propdef-vertical-align
p.width:~SIZING#propdef-width
p.height:~SIZING#propdef-height
p.visibility:~CSSDISP#propdef-visibility
p.float:~CSS2J#propdef-float
p.clear:~CSS2J#propdef-clear

	p.justify-content:~CSSALIGN#justify-content
	p.align-content:~CSSALIGN#align-content
p.break-after:~CSSBREAK#propdef-break-after
p.break-before:~CSSBREAK#propdef-break-before
p.break-*:~CSSBREAK#propdef-break-before

p.overflow:~CSSOVERFLOW3#propdef-overflow

p.position:~CSSPOS#propdef-position
p.z-index:~CSS2J#propdef-z-index
p.white-space:~CSSTEXT#propdef-white-space

p.box-sizing:~SIZING#propdef-box-sizing
p.writing-mode:~CSSWM#propdef-writing-mode
p.direction:~CSSWM#propdef-direction
p.display:~CSSDISP#propdef-display
p.text-decoration:~CSSTEXTDECOR#propdef-text-decoration

v.flex:#valdef-display-flex
v.inline-flex:#valdef-display-inline-flex

v.row:#valdef-flex-direction-row
v.row-reverse:#valdef-flex-direction-row-reverse
v.column:#valdef-flex-direction-column
v.column-reverse:#valdef-flex-direction-column-reverse

v.nowrap:#valdef-flex-wrap-nowrap
v.wrap:#valdef-flex-wrap-wrap
v.wrap-reverse:#valdef-flex-wrap-wrap-reverse

v.none:#valdef-flex-none

v.content:#valdef-flex-basis-content
v.~autoB:#valdef-flex-basis-auto


vJ.flex-start:#valdef-justify-content-flex-start
vJ.flex-end:#valdef-justify-content-flex-end
vJ.center:#valdef-justify-content-center
vJ.space-between:#valdef-justify-content-space-between
vJ.space-around:#valdef-justify-content-space-around

vA.flex-start:#valdef-align-items-flex-start
vA.flex-end:#valdef-align-items-flex-end
vA.center:#valdef-align-items-center
vA.baseline:#valdef-align-items-baseline
vA.stretch:#valdef-align-items-stretch
vA.auto:#valdef-align-items-auto

vC.flex-start:#valdef-align-content-flex-start
vC.flex-end:#valdef-align-content-flex-end
vC.center:#valdef-align-content-center
vC.space-between:#valdef-align-content-space-between
vC.space-around:#valdef-align-content-space-around
vC.stretch:#valdef-align-content-stretch

v.horizontal-tb:~CSSWM#valdef-writing-mode-horizontal-tb
v.ltr:~CSSWM#valdef-direction-ltr
v.rtl:~CSSWM#valdef-direction-rtl
v.vertical-rl:~CSSWM#valdef-writing-mode-vertical-rl

v.~autoS:~SIZING#valdef-width-auto
v.min-content:~SIZING#valdef-width-min-content
v.max-content:~SIZING#valdef-width-max-content
	#valdef-width-*
	v.fit-content:~TR/css-sizing-3/#valdef-width-fit-content
v.safe:~CSSALIGN#valdef-overflow-position-safe

d.min-width:~MQ5#width
	d.min-width:~TR/css3-mediaqueries/#min-width

pe.first-line:~CSSPSEUDO#selectordef-first-line
pe.first-letter:~CSSPSEUDO#selectordef-first-letter

t.number:~CSSVAL#number-value
t.length:~CSSVAL#length-value
t.length-percentage:~CSSVAL#typedef-length-percentage
t.percentage:~CSSVAL#percentage-value

	//valdef-number0
	valdef-flex-grow-number:#<var>&lt;number&gt;</var>
	//valdef-number
	valdef-flex-shrink-number:#<var>&lt;number&gt;</var>

a.tabindex:~HTMLinteraction#attr-tabindex

	●用語
確定的:#definite
不定:#definite

~flex整形~文脈:#flex-formatting-context
~flex~layout:#flex-layout
~flex基底s:#flex-flex-basis
~flex基底~size:#flex-base-size
~flex容器:#flex-container
~flex係数:#flex-factor
~flex伸長-係数:#flex-flex-grow-factor
~flex縮短-係数:#flex-flex-shrink-factor
~flex駒:#flex-item

~flex行l:#flex-line
~flex~level:#flex-level

v.initial:#flex-initial
	~CASCADE#valdef-all-initial

主-軸:#main-axis
主-軸 基底線~集合:#main-axis-baseline
主-次元:#main-dimension
主size~prop:#main-size-property
最小-主size~prop:#min-main-size-property
最大-主size~prop:#max-main-size-property
主size:#main-size
最小-主size:#min-main-size
最大-主size:#max-main-size
主-終端:#main-end
主-始端:#main-start

交叉-軸:#cross-axis
交叉-軸 基底線~集合:#cross-axis-baseline
交叉-次元:#cross-dimension
交叉size~prop:#cross-size-property
最小-交叉size~prop:#min-cross-size-property
最大-交叉size~prop:#max-cross-size-property
交叉size:#cross-size
最小-交叉size:#min-cross-size
最大-交叉size:#max-cross-size
交叉-終端:#cross-end
交叉-始端:#cross-start
	aligned:#alignment
	整列~prop:#propdef-align-items
	畳まれた駒:#visibility-collapse
	common cases:#flex-common
	common uses:#flex-common
	~flow方向:#flex-direction-property
	have equal height:#align-self
	<span class="css">initial</span>:#flex-initial
	rearranged:~CSSDISP#propdef-order
	resolve the flexible lengths:#resolve-flexible-lengths
	reverse:#valdef-row-reverse
	wrapped:#flex-wrap-property
	longhand:#flex-components

§ ~flex~layout~algo:#layout-algorithm
主-軸の整列:#main-alignment
交叉-軸の整列:#cross-alignment
主sizeの決定:#main-sizing
交叉sizeの決定:#cross-sizing
行f~sizeの決定:#line-sizing

単-行f:#single-line-flex-container
複-行f:#multi-line-flex-container
~flex方向:#flex-direction
	＊畳まれた~flex駒:#collapsed-flex-item
畳まれ:#collapsed-flex-item
畳む:#collapsed-flex-item
基底線~整列に関与-:#baseline-participation
支柱~size:#_strut-size
伸張され:#stretched

~auto_v~margin:#auto-margins

内容に基づく最小~size:#content-based-minimum-size
内容~size示唆:#content-size-suggestion
指定d~size示唆:#specified-size-suggestion
転換~size示唆:#transferred-size-suggestion
全部的に~flex不能:#fully-inflexible
~flex可能:#flexible

共通的な用途:#flex-common

	■§9.7 flexible 長さの解決
仮の交叉size:#hypothetical-cross-size
仮の主size:#hypothetical-main-size
~target主size:#target-main-size

	V.自由空間:#free-space
	V.初期~自由空間:#initial-free-space
	V.残りの自由空間:#remaining-free-space
i.拡縮済み~flex縮短-係数:#scaled-flex-shrink-factor

fX.最大-内容 供与:#intrinsic-item-contributions
fX.最小-内容 供与:#intrinsic-item-contributions


	●用語（CSS

旧来の別名n:~CASCADE#legacy-name-alias

~boxの寸法:~CSSBOX#box-model
内容~box:~CSSBOX#content-box
内容~辺:~CSSBOX#content-edge
~margin辺:~CSSBOX#margin-edge

位置決め~scheme:~CSSPOS#positioning-scheme
絶対的に位置され:~CSSPOS#absolute-position
	#abs-non-replaced-width
静的~位置~矩形:~CSSPOS#static-position-rectangle

整形~構造:~CSScommon#formatting-structure
浮動体:~CSS2J#floats
浮動-:~CSS2J#floats
~clearance:~CSS2J#clearance
相殺-:~CSS2J#collapsing-margins

~flow内:~CSSDISP#in-flow
~flow外:~CSSDISP#out-of-flow
~flow~layout:~CSSDISP#flow-layout
置換され:~CSSDISP#replaced-element
塊~化:~CSSDISP#blockify
塊~level:~CSSDISP#block-level
行内~level:~CSSDISP#inline-level
塊~容器:~CSSDISP#block-container
表示~型:~CSSDISP#display-type
匿名:~CSSDISP#anonymous
塊~box:~CSSDISP#block-box
包含塊:~CSSDISP#containing-block
~text連列:~CSSDISP#css-text-sequence
~text~node:~CSSDISP#text-nodes
	~CSSDISP#outer-display-type
	~CSS2J#propdef-display
独立な整形~文脈を確立する:~CSSDISP#establish-an-independent-formatting-context
整形~文脈:~CSSDISP#formatting-context
改変された文書~順序:~CSSDISP#order-modified-document-order

算出d値:~CASCADE#computed-value
指定d値:~CASCADE#specified-value
使用~値:~CASCADE#used-value

塊-軸:~CSSWM#block-axis
塊-終端:~CSSWM#block-end
塊-始端:~CSSWM#block-start
始端:~CSSWM#css-start
終端:~CSSWM#css-end
行内-軸:~CSSWM#inline-axis
行内-終端:~CSSWM#inline-end
行内-始端:~CSSWM#inline-start
書字~mode:~CSSWM#writing-mode
横組み:~CSSWM#horizontal-writing-mode
	論理-縦幅:~CSSWM#logical-height
塊~size:~CSSWM#block-size
行内~size:~CSSWM#inline-size
	:~CSSWM#fit-content
	:~CSSWM#max-content
	~CSSWG/css-box/#fit-content
塊~flow方向:~CSSWM#block-flow-direction

A類の分断~機会:~CSSBREAK#btw-blocks
C類の分断~機会:~CSSBREAK#end-block
	補完
断片化~文脈:~CSSBREAK#fragmentation-context
	断片化された~flow:~CSSBREAK#fragmented-flow
断片化~容器:~CSSBREAK#fragmentation-container
	＊断片化~容器:~CSSBREAK#fragmentainer
断片化による分断:~CSSBREAK#fragmentation-break

横幅:~SIZING#width
縦幅:~SIZING#height
最小-内容 拘束:~SIZING#min-content-constraint
最大-内容 拘束:~SIZING#max-content-constraint
最小-内容 供与:~SIZING#min-content-contribution
最大-内容 供与:~SIZING#max-content-contribution
最小-内容~size:~SIZING#min-content
最大-内容~size:~SIZING#max-content
最小~size:~SIZING#min-size
最大~size:~SIZING#max-size
選好d~size:~SIZING#preferred-size
自動的~size:~SIZING#automatic-size
自動的な最小~size:~SIZING#automatic-minimum-size
自動的な塊~size:~SIZING#automatic-block-size
選好d縦横比:~SIZING#preferred-aspect-ratio
sz.最小:~SIZING#min-size
sz.最大:~SIZING#max-size
sz.自動的:~SIZING#automatic-size
sz.選好d:~SIZING#preferred-size
sz.外縁:~SIZING#outer-size
sz.内縁:~SIZING#inner-size
内在的~size供与:~SIZING#intrinsic-size-contribution
可用な空間:~SIZING#available
内容が収まる行内~size:~SIZING#fit-content-inline-size
内在的~sizing:~SIZING#intrinsic-sizing
~autoとして挙動する:~SIZING#behave-as-auto

基底線~集合:~CSSALIGN#baseline-export
生成される:~CSSALIGN#generate-baselines
整列~基底線:~CSSALIGN#alignment-baseline
整列~prop:~CSSALIGN#box-alignment-properties
整列~文脈:~CSSALIGN#shared-alignment-context
	（補完）
最初の基底線~集合:~CSSALIGN#first-baseline-set
基底線を合成-:~CSSALIGN#synthesize-baseline
合成-:~CSSALIGN#synthesize-baseline

文書~空白:~CSSTEXT#white-space

整形される最初の行l:~CSSPSEUDO#first-formatted-line
最初の字lを成す~text:~CSSPSEUDO#first-letter-text

~scroll容器:~CSSOVERFLOW3#scroll-container
~scrollport:~CSSOVERFLOW3#scrollport
~scroll可能な値:~CSSOVERFLOW3#scrollable-overflow-value

複-~col容器:~CSSMCOL#multi-column-container
~col~box:~CSSMCOL#column-box

~table包装~box:~CSSTABLE#table-wrapper-box

●●ref_key_map
CSS3BREAK:CSSBREAK3
CSS3WRITINGMODES:CSSWRITINGMODES3
CSS3UI:CSSUI3

●●ref_normative

[CSS-ALIGN-3]
    Elika Etemad; Tab Atkins Jr.. ＜CSS Box Alignment Module Level 3＞. URL: https://drafts.csswg.org/css-align/
[CSS-BOX-4]
    Elika Etemad. ＜CSS Box Model Module Level 4＞. URL: https://drafts.csswg.org/css-box-4/
[CSS-BREAK-4]
    Rossen Atanassov; Elika Etemad. ＜CSS Fragmentation Module Level 4＞. URL: https://drafts.csswg.org/css-break-4/
[CSS-CASCADE-5]
    Elika Etemad; Miriam Suzanne; Tab Atkins Jr.. ＜CSS Cascading and Inheritance Level 5＞. URL: https://drafts.csswg.org/css-cascade-5/
[CSS-DISPLAY-3]
    Elika Etemad; Tab Atkins Jr.. ＜CSS Display Module Level 3＞. URL: https://drafts.csswg.org/css-display/
[CSS-DISPLAY-4]
    Elika Etemad; Tab Atkins Jr.. ＜CSS Display Module Level 4＞. URL: https://drafts.csswg.org/css-display/
[CSS-FLEXBOX-1]
    Tab Atkins Jr.; et al. ＜CSS Flexible Box Layout Module Level 1＞. URL: https://drafts.csswg.org/css-flexbox-1/
[CSS-IMAGES-3]
    Tab Atkins Jr.; Elika Etemad; Lea Verou. ＜CSS Images Module Level 3＞. URL: https://drafts.csswg.org/css-images-3/
[CSS-INLINE-3]
    Elika Etemad. ＜CSS Inline Layout Module Level 3＞. URL: https://drafts.csswg.org/css-inline-3/
[CSS-OVERFLOW-3]
    Elika Etemad; Florian Rivoal. ＜CSS Overflow Module Level 3＞. URL: https://drafts.csswg.org/css-overflow-3/
[CSS-POSITION-3]
    Elika Etemad; Tab Atkins Jr.. ＜CSS Positioned Layout Module Level 3＞. URL: https://drafts.csswg.org/css-position-3/
[CSS-PSEUDO-4]
    Daniel Glazman; Elika Etemad; Alan Stearns. ＜CSS Pseudo-Elements Module Level 4＞. URL: https://drafts.csswg.org/css-pseudo-4/
[CSS-SIZING-3]
    Tab Atkins Jr.; Elika Etemad. ＜CSS Box Sizing Module Level 3＞. URL: https://drafts.csswg.org/css-sizing-3/
[CSS-SIZING-4]
    Tab Atkins Jr.; Elika Etemad; Jen Simmons. ＜CSS Box Sizing Module Level 4＞. URL: https://drafts.csswg.org/css-sizing-4/
[CSS-TEXT-4]
    Elika Etemad; et al. ＜CSS Text Module Level 4＞. URL: https://drafts.csswg.org/css-text-4/
[CSS-VALUES-3]
    Tab Atkins Jr.; Elika Etemad. ＜CSS Values and Units Module Level 3＞. URL: https://drafts.csswg.org/css-values-3/
[CSS-VALUES-4]
    Tab Atkins Jr.; Elika Etemad. ＜CSS Values and Units Module Level 4＞. URL: https://drafts.csswg.org/css-values-4/
[CSS-WRITING-MODES-4]
    Elika Etemad; Koji Ishii. ＜CSS Writing Modes Level 4＞. URL: https://drafts.csswg.org/css-writing-modes-4/
[CSS2]
    Bert Bos; et al. ＜Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification＞. URL: https://drafts.csswg.org/css2/
[CSS3-BREAK]
    Rossen Atanassov; Elika Etemad. ＜CSS Fragmentation Module Level 3＞. URL: https://drafts.csswg.org/css-break/
[CSS3-WRITING-MODES]
    Elika Etemad; Koji Ishii. ＜CSS Writing Modes Level 3＞. URL: https://drafts.csswg.org/css-writing-modes-3/
[CSSOM-1]
    Daniel Glazman; Emilio Cobos Álvarez. ＜CSS Object Model (CSSOM)＞. URL: https://drafts.csswg.org/cssom/
[RFC2119]
    S. Bradner. ＜Key words for use in RFCs to Indicate Requirement Levels＞. March 1997. Best Current Practice. URL: https://datatracker.ietf.org/doc/html/rfc2119

●●ref_informative

[CSS-TEXT-DECOR-4]
    Elika Etemad; Koji Ishii. ＜CSS Text Decoration Module Level 4＞. URL: https://drafts.csswg.org/css-text-decor-4/
[CSS3UI]
    Tantek Çelik; Florian Rivoal. ＜CSS Basic User Interface Module Level 3 (CSS3 UI)＞. URL: https://drafts.csswg.org/css-ui-3/
[HTML]
    Anne van Kesteren; et al. ＜HTML Standard＞. Living Standard. URL: https://html.spec.whatwg.org/multipage/


●●trans_metadata
<p>
~THIS_PAGEは、~W3Cにより編集者草案として公開された
<a href="~SPEC_URL">CSS Flexible Box Layout Module Level 1</a>
を日本語に翻訳したものです。
~PUB
</p>

●●spec_metadata

最新公表バージョン
	https://www.w3.org/TR/css-flexbox-1/
公表履歴
	https://www.w3.org/standards/history/css-flexbox-1/
編集者草案
	https://drafts.csswg.org/css-flexbox-1/

フィードバック
	<a href="https://github.com/w3c/csswg-drafts/labels/css-flexbox-1">CSSWG Issues Repository</a>

編集
	<a href="http://xanthir.com/contact/">Tab Atkins Jr.</a> (Google)
	<a href="http://fantasai.inkedblade.net/contact">Elika J. Etemad / fantasai</a> (Apple)
	<a href="mailto:ratan@microsoft.com">Rossen Atanassov</a> (Microsoft)
前任編集者
	<a href="mailto:alexmog@microsoft.com">Alex Mogilevsky</a> (Microsoft Corporation)
	<a href="https://dbaron.org/">L. David Baron</a> (Mozilla)
	<a href="mailto:enndeakin@gmail.com">Neil Deakin</a> (Mozilla Corporation)
	<a href="mailto:ian@hixie.ch">Ian Hickson</a> (formerly of Opera Software)
	<a href="mailto:hyatt@apple.com">David Hyatt</a> (formerly of Netscape Corporation)

Suggest an Edit for this Spec
	<a href="https://github.com/w3c/csswg-drafts/blob/main/css-flexbox-1/Overview.bs">GitHub Editor</a>
課題リスト
	https://drafts.csswg.org/css-flexbox-1/issues
テスト一式
	https://wpt.fyi/results/css/css-flexbox/
commit 履歴
	https://github.com/w3c/csswg-drafts/commits/main/css-flexbox-1

</script>

</head>
<body>


<!--%resource pool -->
<template id="_persisted_parts">

<pre
	id="_dgm-overview-example-code"
	class="lang-html">&lt;section id="deals"&gt;
  &lt;section class="sale-item"&gt;
    &lt;h1&gt;入門用パソコン一式&lt;/h1&gt;
    &lt;p&gt;とにかく安い。
    &lt;ul&gt;
      &lt;li&gt;コンピュータ
      &lt;li&gt;モニタ
      &lt;li&gt;キーボード
      &lt;li&gt;マウス
    &lt;/ul&gt;
    &lt;img src="images/computer.jpg"
         alt="パソコン（白）と周辺機器一式"&gt;
    &lt;button&gt;今すぐ買う&lt;/button&gt;
  &lt;/section&gt;
  &lt;section class="sale-item"&gt;
    …
  &lt;/section&gt;
  …
&lt;/section&gt;
</pre>

<div id="_dgm-overview-example">
	<div class="_col"></div>
	<div class="_col"></div>
	<div class="_desc">
<img
	src="css-flexbox/computer.jpg"
	alt="パソコン（白）と周辺機器一式"
>
<!--
You get: a white computer with matching peripherals.
You get: a white computer with matching keyboard and monitor." -->
			<h1 style="font-size: 1.4em;">入門用パソコン一式</h1>
<p>
とにかく安い。
</p>
			<ul>
				<li>コンピュータ</li>
				<li>モニタ</li>
				<li>キーボード</li>
				<li>マウス</li>
			</ul>
		</div>
<!-- 
Computer Starter Kit

This is the best computer money can buy, if you don’t have much money.

    Computer
    Monitor
    Keyboard
    Mouse

BUY NOW
-->

	<div class="_desc">
<img
	src="css-flexbox/printer.png"
	alt="You get: beautiful ASCII art."
>
			<h1 style="font-size: 1.4em;">プリンタ</h1>
<p>
ASCII アートしか印刷できない。
</p>

<ul><li>
紙とインクは付属しません。
</li></ul>
	</div>
	<div class="_buttons">
		<div><button>今すぐ買う</button></div>
		<div><button>今すぐ買う</button></div>
	</div>
<!-- 
Printer

Only capable of printing ASCII art.

    Paper and ink not included.
-->
</div>

<!-- ＊
<img
	id="_dgm-flex-item-determination"
	src="css-flexbox/flex-item-determination.png"
>
-->

<div
	id="_dgm-flex-item-determination"
><div>blcok<br>&nbsp;<br>&nbsp;</div
><div>float<br>&nbsp;<br>&nbsp;</div
><div>anonymous item 3<br>&nbsp;<br>&nbsp;</div
><div style="text-align: center; margin-right:0;">item 4<br><q>item 4</q><br>item 4</div></div>

<nav
	id="_dgm-ex-visibility-collapse-menu"
>
	<ul>
		<li id="nav-about"><a href="#nav-about">About</a>
			<ul>
<li><a href="#_dummy">History</a></li>
<li><a href="#_dummy">Mission</a></li>
<li><a href="#_dummy">People</a></li>
			</ul>
		</li>
		<li id="nav-projects"><a href="#nav-projects">Projects</a>
			<ul>
<li><a href="#_dummy">Art</a></li>
<li><a href="#_dummy">Architecture</a></li>
<li><a href="#_dummy">Music</a></li>
			</ul>
		</li>
			<li id="nav-interact"><a href="#nav-interact">Interact</a>
			<ul>
<li><a href="#_dummy">Blog</a></li>
<li><a href="#_dummy">Forums</a></li>
			</ul>
		</li>
	</ul>
</nav>


<div
	id="_dgm-flex-flow1"
	class="flex-flow 横組"
	style="width:160px; height:40px;"
>
	<div style="left:0;">1</div>
	<div style="left: 43px;">2</div>
	<div style="left: 96px;">3</div>
	<div style="left: 139px;">4</div>
</div>

<div
	id="_dgm-flex-flow2"
	class="flex-flow 縦組"
	style="width:83px;height:160px;"
>
	<div style="top: 0;">1</div>
	<div style="top: 43px;">2</div>
	<div style="top: 96px;">3</div>
	<div style="top: 0; left:43px;">4</div>
</div>

<div
	id="_dgm-flex-flow3"
	class="flex-flow 横組"
	style="width:160px;height:83px;"
>
	<div style="right: 0; bottom:0;">1</div>
	<div style="right: 43px; bottom:0;">2</div>
	<div style="right: 96px; bottom:0;">3</div>
	<div style="right: 0;">4</div>
</div>

<div
	id="_dgm-flex-flow-english"
	class="flex-flow 横組"
	style="width:160px;height:83px;"
>
	<div style="left:0;">A</div>
	<div style="left: 43px;">B</div>
	<div style="left: 96px;">C</div>
	<div style="left: 0;top:43px;">D</div>
</div>

<div
	id="_dgm-flex-flow-japanese"
	class="flex-flow 縦組"
	style="width:83px;height:160px;"
>
	<div style="top: 0; right:0;">一</div>
	<div style="top: 43px; right:0;">二</div>
	<div style="top: 96px; right:0;">三</div>
	<div style="top: 0; left:0;">四</div>
</div>

<div
	id="_dgm-multiline-flex"
	class="flex-flow 横組"
	style="width:285px; height:83px;"
>
	<div style="left:0;">1</div>
	<div style="left:96px;">2</div>
	<div style="left:192px;">3</div>
	<div style="left:0;width:auto;right:0;top:43px;">4</div>
</div>

<div id="_dgm-flex-order-page" class="flex-flow"
	title="このページでは、 header は上端に， footer は下端に位置し、 article は，左の nav, 右の aside に挟まれた中央に位置する／In this page the header is at the top and the footer at the bottom, but the article is in the center, flanked by the nav on the right and the aside on the left."
>
	<div style="height:47px;top:0; bottom:auto;">&lt;header&gt;</div>
	<div style="right:auto; width:80px;">&lt;nav&gt;</div>
	<div style="left:83px; right:83px;">&lt;article&gt;</div>
	<div style="left:auto; width:80px;">&lt;aside&gt;</div>
	<div style="height:47px;top:auto; bottom:0;">&lt;footer&gt;</div>
</div>

<div
	id="_dgm-multiline-no-flex"
	class="flex-flow 横組"
	style="width:285px; height:83px;"
>
	<div style="left:0;">1</div>
	<div style="left:80px;">2</div>
	<div style="left:160px;">3</div>
	<div style="left:0;top:43px;">4</div>
</div>

<div
	id="_dgm-rel-vs-abs-flex-a"
	class="rel-vs-abs"
><div>
	<div style="left:0; width:6.25em;">短い<div>1</div></div>
	<div style="left:calc(6.25em + 3px); width:6.25em;">なが〜〜い<div>1</div></div>
	<div style="left:calc(12.5em + 6px); width:12.5em;">短い<div>2</div></div>
</div></div>

<div
	id="_dgm-rel-vs-abs-flex-b"
	class="rel-vs-abs"
><div>
	<div style="left:0; width:6em;">
<div style="width:calc(2em - 4px);right:auto;">1</div>
短い
<div style="width:calc(2em - 4px);left:auto;">1</div>
</div>
	<div style="left:calc(6em + 3px); width:9em;">
<div style="width:calc(2em - 4px);right:auto;">1</div>
なが〜〜い
<div style="width:calc(2em - 4px);left:auto;">1</div>
	</div>
	<div style="left:calc(15em + 6px); width:10em;">
<div style="width:calc(4em - 8px);right:auto;">2</div>
短い
<div style="width:calc(4em - 8px);left:auto;">2</div>
</div>
</div>
</div>

<ul id="_dgm-auto-bar">
	<li><a href="#_dummy">About</a></li>
	<li><a href="#_dummy">Projects</a></li>
	<li><a href="#_dummy">Interact</a></li>
	<li style="float: right;"><a href="#_dummy">Login</a></li>
</ul>

<div
	id="_dgm-cross-auto-figure"
	style="display:table; margin: 0 auto 1em;"
>
	<div style="display:table-cell; padding-right: 50px;">
		<div>
			<div>About</div>
			<div>Authoritarianism</div>
			<div>Blog</div>
		</div>
	</div>
	<div style="display:table-cell; padding-left: 50px;">
		<div>
			<div>About</div>
			<div style="margin-left: -31px;">Authoritarianism</div>
			<div>Blog</div>
		</div>
	</div>
</div>

<div id="_dgm-flex-pack">
<div>
<div style="left:0px;"></div>
<div style="left:100px;"></div>
<div style="left:180px;"></div>
<div>flex-start</div>
</div>
<div>
<div style="right:280px;"></div>
<div style="right:200px;"></div>
<div style="right:0px;"></div>
<div>flex-end</div>
</div>
<div>
<div style="left:61px;"></div>
<div style="left:161px;"></div>
<div style="right:61px;"></div>
<div>center</div>
</div>
<div>
<div style="left:0;"></div>
<div style="left:161px;"></div>
<div style="right:0;"></div>
<div>space-between</div>
</div>
<div>
<div style="left:21px;"></div>
<div style="left:161px;"></div>
<div style="right:21px;"></div>
<div>space-around</div>
</div>
</div>

<div id="_dgm-flex-align" style="min-width:20em; max-width: 50em;">

	<div>
<div style="top:0"></div>
<div style="top:0"></div>
<div style="top:0"></div>
<div style="top:0"></div>
<div>flex-start</div>
	</div><div>
<div style="bottom:0;"></div>
<div style="bottom:0;"></div>
<div style="bottom:0;"></div>
<div style="bottom:0;"></div>
<div>flex-end</div>
	</div>
	<div>
<div style="top:0.5rem"></div>
<div style="top:1.5rem"></div>
<div style="top:1rem"></div>
<div style="top:0"></div>
<div>center</div>

	</div><div>
<div style="height:6rem"></div>
<div style="height:6rem"></div>
<div style="height:6rem"></div>
<div style="height:6rem"></div>
<div>stretch</div>
	</div>
<!--
	bottom1 + bottom2 = 4.6,
	bottom2 + font-size = 5/3/4/6 − 0.3
-->
	<div style="width:91.6%; height:7rem;">
<div style="bottom:1.2rem;"><div style="bottom:3.4rem;font-size:1.3rem;">寿限無寿限無寿限無寿限無寿限無</div></div>
<div style="bottom:2.9rem;"><div style="bottom:1.7rem;font-size:0.9rem;">寿限無寿限無寿限無寿限無寿限無</div></div>
<div style="bottom:3.0rem;"><div style="bottom:1.6rem;font-size:2rem;">寿限無寿限無寿限無寿限無寿限無</div></div>
<div style="bottom:0;"><div style="bottom:4.6rem;font-size:1.1rem;">寿限無寿限無寿限無寿限無寿限無</div></div>
<div>baseline</div>
	</div>
</div>


<div id="_dgm-align-content-example">

	<div>
<div style="top:0"></div>
<div style="top:50px"></div>
<div style="top:100px"></div>
<div>flex-start</div>
	</div>
	<div>
<div style="bottom:100px"></div>
<div style="bottom:50px"></div>
<div style="bottom:0"></div>
<div>flex-end</div>
	</div>
	<div>
<div style="top:50px"></div>
<div style="top:100px"></div>
<div style="bottom:50px"></div>
<div>center</div>
	</div>
	<div>
<div style="top:0px"></div>
<div style="top:100px"></div>
<div style="bottom:0px"></div>
<div>space-between</div>
	</div>
	<div>
<div style="top:17px"></div>
<div style="top:100px"></div>
<div style="bottom:17px"></div>
<div>space-around</div>
	</div>
	<div>
<div style="height:83px;top:0"></div>
<div style="height:84px;top:83px"></div>
<div style="height:83px;bottom:0"></div>
<div>stretch</div>
	</div>
</div>

</template>

<header>
	<hgroup>
<h1>CSS flex レイアウト — CSS Flexible Box Layout Module Level 1</h1>
	</hgroup>
</header>

<div id="MAIN" hidden>

	<section id="abstract">
◎要約

<p>
この仕様は、
~UI設計に最適化された~CSS~box~modelについて述べる。
~flex~layout~modelにおいては，
~flex容器の子たちを任意の方向に~lay-outしつつ，
それらの大きさも “`flex^en （伸縮可能）” にする
— すなわち、
未使用な空間を埋めるよう大きくすることも，
逆に親からはみ出さないよう縮めることもできる。
また、
縦横どちらの方向にも，子たちの整列を容易に操作できる。
これらの~boxの入子ng（縦~boxの内側の横~box, あるいは その逆）も，
二次元な~layoutを築くために利用できる。
◎
The specification describes a CSS box model optimized for user interface design. In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions.
</p>

~CSSisaLANG

	</section>
	<section id="sotd">
◎位置付け

<p>
これは、編集者草案の公な複製です…
【以下、この節の内容は，~SOTD-CSSに移譲。】
</p>

	</section>

<main id="MAIN0">

	<section id="intro">
<h2 title="Introduction">1. 序論</h2>

◎非規範的

<p>
`CSS2$r にて定義される~layout~mode
— ~boxの~sizeと位置を，その［
同胞~box／先祖~box
］との関係性に基づいて決定する~algo —
には、
次に挙げる 4 種がある：
◎
CSS 2.1 defined four layout modes — algorithms which determine the size and position of boxes based on their relationships with their sibling and ancestor boxes:
</p>
<ul class="compact">
	<li>
文書を~lay-outするために設計された塊~layout
◎
block layout, designed for laying out documents
</li>
	<li>
~textを~lay-outするために設計された行内~layout
◎
inline layout, designed for laying out text
</li>
	<li>
二次元な~dataを~table状に~lay-outするために設計された~table~layout
◎
table layout, designed for laying out 2D data in a tabular format
</li>
	<li>
文書~内の他の要素にさほど関わり無く，~~明確な位置決めにより~lay-outするために設計された `positioned^en ~layout 【`位置決め~scheme$ `CSS-POSITION-3$r】
◎
positioned layout, designed for very explicit positioning without much regard for other elements in the document
</li>
</ul>

<p>
この~moduleは、
新たな~layout~mode
`~flex~layout@
を導入する。
それは、
もっと複階的な［
~app／~web~page
］を~lay-outするために設計された。
◎
This module introduces a new layout mode, flex layout, which is designed for laying out more complex applications and webpages.
</p>

		<section id="overview">
<h3 title="Overview">1.1. 概観</h3>

◎非規範的

<p>
~flex~layoutは、
表面的には塊~layoutに類似する。
それは、
塊~layoutに利用できる多くの~prop
— より複階的な，~textや文書を~~主対象にする~prop
（ `float$p や <a href="~CSSMCOL">`column-*^p</a> など） —
を欠くが、
その引き換えに，~web~appや複階的な~web~pageに必要になることが多い［
空間の分配-法／内容の整列-法
］を得るための単純かつ強力な道具を得られる。
~flex容器の内容は：
◎
Flex layout is superficially similar to block layout. It lacks many of the more complex text- or document-centric properties that can be used in block layout, such as floats and columns. In return it gains simple and powerful tools for distributing space and aligning content in ways that web apps and complex web pages often need. The contents of a flex container:
</p>

<ul>
	<li>
どの`~flow方向＠#flex-direction-property$にも
（左方, 右方, 下方, あるいは上方へも！）
~lay-outできる。
◎
can be laid out in any flow direction (leftwards, rightwards, downwards, or even upwards!)
</li>
	<li>
それらの表示-順序を，~style層において［
`逆順＠#valdef-flex-direction-row-reverse$にできる／
`配列し直せる＠~CSSDISP#propdef-order$
］
（すなわち、
~sourceや発話の順序とは独立に，視覚的な順序を与えられる）。
◎
can have their display order reversed or 'order|rearranged' at the style layer (i.e., visual order can be independent of source and speech order)
</li>
	<li>
単独の軸（ `主-軸$ ）沿いに，一次元に~lay-outしたり、
第二の軸（ `交叉-軸$ ）沿いに，複数~行fに渡るよう`折返す＠#flex-wrap-property$ことができる。
◎
can be laid out linearly along a single (main) axis or wrapped into multiple lines along a secondary (cross) axis
</li>
	<li>
それらの~sizeは、
`可用な空間$に応じて `“~flex”＠#flexibility$ （伸縮可能）になれる。
◎
can “flex” their sizes to respond to the available space
</li>
	<li>
それらを［
当の容器に対して, あるいは互いに
］，`交叉-軸$沿いに`整列させ＠#alignment$られる。
◎
can be aligned with respect to their container or each other on the secondary (cross)
</li>
	<li>
`主-軸$沿いに`畳まれるかどうか＠#visibility-collapse$を
— 当の容器の`交叉size$を保全しながら —
動的に切り替えれる。
◎
can be dynamically collapsed or uncollapsed along the main axis while preserving the container’s cross size
</li>
</ul>

<div class="example">
<p>
ここに、
ある目録の例を示す
— 目録を成す各~駒は、［
~~見出し, 写真, 記述, 購入ボタン
］を備えているとする。
各~駒が~layoutの中で占める~~区画の~sizeは，
記述の長さに関わらず どれも同じになり、
各~~区画の中では，
写真が~~見出しより上に~~位置し,
購入ボタンは下端に整列させたいとする。
この設計の多くの側面は、
~flex~layoutにより，容易に為せる：
◎
Here’s an example of a catalog where each item has a title, a photo, a description, and a purchase button. The designer’s intention is that each entry has the same overall size, that the photo be above the text, and that the purchase buttons are aligned at the bottom, regardless of the length of the item’s description. Flex layout makes many aspects of this design easy:
</p>

<ul>
	<li>
目録では，
駒たちを何本かの~rowに渡って横方向に~lay-outした上で、
同じ~rowの中では その中の各~駒の縦幅が等しくなるよう，~flex~layoutを利用する。
各~~~区画は、
それ自身が 1 本の~colを成す~flex容器になり，
その内容を縦方向に~lay-outする。
◎
The catalog uses flex layout to lay out rows of items horizontally, and to ensure that items within a row are all equal-height. Each entry is then itself a column flex container, laying out its contents vertically.
</li>
	<li>
各~~区画の中では，~source文書~内容の論理-順序【 “文書~順序” 】は［
~~見出し, 記述, 写真
］の順にされる。
これは、［
発話や非~CSS~browserにおいてもイミを成し得る順序付け
］を供する一方で、
より視覚的な呈示においては［
`order$p を利用して内容の後方に在る画像を上端に引き上げ，
`align-self$p を利用して それを横方向の中央に~~位置させる
］ことで，より注目を引くものにできる。
◎
Within each entry, the source document content is ordered logically with the title first, followed by the description and the photo. This provides a sensible ordering for speech rendering and in non-CSS browsers. For a more compelling visual presentation, however, order is used to pull the image up from later in the content to the top, and align-self is used to center it horizontally.
</li>
	<li>
購入ボタンに対する上側の`~auto_v~margin$により、
どの~~区画の中でも，ボタンを
— 駒の記述の縦幅に関わらず —
下端に押しやる。
◎
An auto margin above the purchase button forces it to the bottom within each entry box, regardless of the height of that item’s description.
</li>
</ul>

<pre class="lang-css">
#deals {
  `display:flex$p;
      /* <span class="comment">
~flex~layoutにより，各~駒の`縦幅は等しくなる＠#propdef-align-self$
◎
Flex layout so items have equal height
</span> */

  `flex-flow:row wrap$p;
      /* <span class="comment">
駒たちを複数~行fに渡って折返す
◎
Allow items to wrap into multiple lines
</span> */
}
.sale-item {
  `display:flex$p;
      /* <span class="comment">
各~駒の内容も，~flex~layoutを利用して~lay-outする
◎
Lay out each item using flex layout
</span> */

  `flex-flow:column$p;
      /* <span class="comment">
駒の内容は縦方向に~lay-outする
◎
Lay out item’s contents vertically
</span> */
}
.sale-item &gt; img {
  `order:-1$p;
      /* <span class="comment">
画像を（視覚的な順序で）他の内容より前に~~移動する
◎
Shift image before other content (in visual order)
</span> */

  `align-self:center$p;
      /* <span class="comment">
画像を交叉-~~方向（横方向）の中央に据える
◎
Center the image cross-wise (horizontally)
</span> */
}
.sale-item &gt; button {
  `margin-top:auto$p;
      /* <span class="comment">
上端の`~auto_v~margin$によりボタンは下端へ押しやられる
◎
Auto top margin pushes button to bottom
</span> */
}
</pre>

`overview-example-code^dgm

<figure>`overview-example^dgm
<figcaption>
上の~codeの描画~例
◎
An example rendering of the code above.
</figcaption></figure>
</div>

		</section>
		<section id="placement">
<h3 title="Module interactions">1.2. ~module間の相互作用</h3>

<p>
この~moduleは、
新たな［
`塊~level$, `行内~level$
］の`表示~型$を追加し，
新たな種類の整形~文脈を その~layoutを制御する~propと伴に定義することにより、
`CSS2$r による `display$p ~propの定義を`拡張する＠#flex-containers$。
この~moduleにて定義される~propは、
どれも，［
`first-line$pe ／ `first-letter$pe
］疑似要素には適用されない。
◎
This module extends the definition of the display property [CSS2], adding a new block-level and new inline-level display type, and defining a new type of formatting context along with properties to control its layout. None of the properties defined in this module apply to the ::first-line or ::first-letter pseudo-elements.
</p>

<p>
`CSS-ALIGN-3$r は、
ここに導入する`整列~prop$
（ `justify-content$p, `align-items$p, `align-self$p, `align-content$p ）
の定義を拡張して，それらに取って代わる。
◎
The CSS Box Alignment Module extends and supersedes the definitions of the alignment properties (justify-content, align-items, align-self, align-content) introduced here.
</p>

		</section>
		<section id="values">
<h3 title="Values Definitions">1.3. 値~定義</h3>

<p class="trans-note">【
この節の内容は
`~CSS日本語訳 共通~page＠~CSScommon#values$
に移譲。
】</p>

		</section>
	</section>
	<section id="box-model">
<h2 title="Flex Layout Box Model and Terminology">2. ~flex~layoutの~box~modelとその各種用語</h2>

<p>
`~flex容器@
とは、［
`display$p ~propの`算出d値$が［
`flex$v または `inline-flex$v
］になる要素
］により生成される~boxである。
~flex容器の`~flow内$にある各~子は、
`~flex駒@
と呼ばれ，
~flex~layout~modelを利用して~lay-outされる。
◎
A flex container is the box generated by an element with a computed display of flex or inline-flex. In-flow children of a flex container are called flex items and are laid out using the flex layout model.
</p>

<p>
`［ 塊／行内 ］~flow方向＠~CSSWM#abstract-box$に重きが置かれた［
塊／行内
］~layoutとは異なり、
~flex~layoutにおける~layoutの計算は，
`~flex方向@
に重きが置かれる。
~flex~layoutについて~~述べ易くするため、
この節では~flex~flowに相対的な用語を定義する。
これらの用語が，物理的な［
方向（上端／右端／下端／左端）,
軸（縦／横）,
~size（横幅／縦幅）
］にどう対応付けられるかは、
`flex-flow$p 値と`書字~mode$が決定する。
◎
Unlike block and inline layout, whose layout calculations are biased to the block and inline flow directions, flex layout is biased to the flex directions. To make it easier to talk about flex layout, this section defines a set of flex flow–relative terms. The flex-flow value and the writing mode determine how these terms map to physical directions (top/right/bottom/left), axes (vertical/horizontal), and sizes (width/height).
</p>

<figure>

【！ flex-direction-terms^dgm】

<svg
	id="flex-direction-terms"
	xmlns="http://www.w3.org/2000/svg"
	width="100%"
	style="max-width: 680px;"
	viewBox="-50 -40 680 280"

	font-family="sans-serif"
	text-anchor="middle"
	font-size="18"
	color="var(--K-color)"
>

	<g fill="var(--pale-color)" stroke="none">
<rect fill="var(--dim-color)" x="0" y="0" width="500" height="120" rx="10" ry="10" />
<rect x="5" y="5" width="150" height="110" rx="5" ry="5" />
<rect x="160" y="5" width="335" height="110" rx="5" ry="5" />
	</g>

	<g
color="var(--W-color)"
font-size="40"
font-weight="bold"
	>
<text x="75" y="75">1</text>
<text x="328" y="75">2</text>
	</g>

	<g
font-size="16"
font-style="italic"
fill="#444"
	>
<text x="150" y="110" text-anchor="end">~flex駒</text>
<text x="165" y="110" text-anchor="start">~flex駒</text>
<text x="155" y="136">~flex容器</text>
	</g>

	<g
class="_dt-side"
stroke-width="3"
stroke-dasharray="5 5"
	>
		<g transform="translate(1.5,120)">
<path d="M 0 -10 v 40"/>
<text x="0" y="40">主-始端</text>
		</g>
		<g transform="translate(498.5,120)">
<path d="M 0 -10 v 40"/>
<text x="0" y="40">主-終端</text>
		</g>
		<g transform="translate(503,1.5)">
<path d="M -10 0 h 40"/>
<text x="25" y="4" style="text-anchor: start;">交叉-始端</text>
		</g>
		<g transform="translate(503,118.5)">
<path d="M -10 0 h 40"/>
<text x="25" y="4" style="text-anchor: start;">交叉-終端</text>
		</g>
	</g>

	<g
class="_dt-axis"
stroke-width="3"
	>
		<g transform="translate(0,60)">
<path
	d="
M7.5,0
a5,5 0,0,0 -10,0 a5,5 0,0,0 10,0
h 600
h-5 l0,-3 10,3 -10,3 0,-3"
/>
<text x="550" y="-8">主-軸</text>
		</g>
		<g transform="translate(250,0)rotate(90)">
<path
	d="
M 7.5 0
a5,5 0,0,0 -10,0 a5,5 0,0,0 10,0
h 220
h-5 l0,-3 10,3 -10,3 0,-3"
/>
<text x="180" y="-8">交叉-軸</text>
		</g>
	</g>

	<g
class="_dt-size"
stroke-width="2"
	>
		<g transform="translate(0,-15)">
<path d="M1,10 v-10 h498 v10" />
<text x="250" y="-4">主size</text>
		</g>
		<g transform="translate(-15,120) rotate(-90)">
<path d="M1,10 v-10 h118 v10" />
<text x="60" y="-4">交叉size</text>
		</g>
	</g>

</svg>

<figcaption>
`row$v ~flex容器に適用される種々の［
方向や~sizing
］のための用語の図示。
【縦組みの場合、縦と横が入れ替わる。】
◎
An illustration of the various directions and sizing terms as applied to a row flex container.
</figcaption></figure>

<dl id="main">
	<dt class="_dt-axis">
主-軸
◎
main axis
</dt>
	<dt class="_dt-axis">
主-次元
◎
main dimension
</dt>
	<dd>
~flex容器の
`主-軸@
とは、
`~flex駒$がその軸~沿いに~lay-outされ,
`主-次元@
に延伸する，首な軸である。
◎
The main axis of a flex container is the primary axis along which flex items are laid out. It extends in the main dimension.
</dd>
	<dd class="trans-note">【
この仕様の “~~次元（ `dimension^en ）” は、
もっぱら，縦か横いずれかの軸~方向の計量を意味する。
】</dd>

	<dt class="_dt-side">
主-始端
◎
main-start
</dt>
	<dt class="_dt-side">
主-終端
◎
main-end
</dt>
	<dd>
`~flex駒$たちは、
`主-始端@
側から
`主-終端@
側へ向けて
容器~内に配置される。
◎
The flex items are placed within the container starting on the main-start side and going toward the main-end side.
</dd>

	<dt class="_dt-size">
主size
◎
main size
</dt>
	<dt class="_dt-size">
主size~prop
◎
main size property
</dt>
	<dd>
<p>
［
`~flex容器$／`~flex駒$
］の：
</p>
		<ul>
			<li>
`主size@
は、［
`横幅$, `縦幅$
］のうち，`主-次元$に属する方を指す。
</li>
			<li>
`主size~prop@
は、［
`width$p, `height$p
］のうち，`主-次元$に属する方の~propを指す。
</li>
			<li>
`最小-主size~prop@
は、［
`min-width$p, `min-height$p
］のうち，`主-次元$に属する方の~propを指し，
`最小-主size@
を決定する。
</li>
			<li>
`最大-主size~prop@
］は、［
`max-width$p, `max-height$p
］のうち，`主-次元$に属する方の~propを指し，
`最大-主size@
を決定する。
</li>
		</ul>
◎
The main size of a flex container or flex item refers to its width or height, whichever is in the main dimension.＼
Its main size property is either its width or height property, whichever is in the main dimension.＼
Likewise, its min and max main size properties are its min-width/max-width or min-height/max-height properties, whichever are in the main dimension, and determine its min/max main size.
</dd>
	<dd>
`~flex~layout$においては、
`主size$は `flex$p ~propにより制御される
— `主size~prop$により直にではなく。
◎
In flex layout, the main size is controlled by the flex property rather than directly by the main size property.
</dd>
	<dd class="note">注記：
すなわち，~flex駒の`主-次元$における使用~sizeへの参照は、
どれも（`横幅$, `縦幅$, `行内~size$, `塊~size$いずれにせよ），
当の駒の~flex~~処理後の`主size$を指す。
◎
Note: This means any references to a flex item’s used size in the main dimension (width, height, inline size, block size) refers to its post-flexing main size.
</dd>
</dl>

<dl id="cross">
	<dt class="_dt-axis">
交叉-軸
◎
cross axis
</dt>
	<dt class="_dt-axis">
交叉-次元
◎
cross dimension
</dt>
	<dd>
`主-軸$に垂直な軸は
`交叉-軸@
と呼ばれ，
`交叉-次元@
に延伸する。
◎
The axis perpendicular to the main axis is called the cross axis. It extends in the cross dimension.
</dd>
	<dd class="trans-note">【
この訳では、
“`cross^en” の対訳に “~~交差” ではなく “~~交叉” を利用する。
“~~叉” の方が視覚的なイメージに合うこと, および
“~~交差” は主に “`intersect^en” の対訳に利用されるので。
】</dd>

	<dt class="_dt-side">
交叉-始端
◎
cross-start
</dt>
	<dt class="_dt-side">
交叉-終端
◎
cross-end
</dt>
	<dd>
`~flex行l＠#flex-lines$たち
（各~flex行lは、
駒たちにより埋められる）
は、
~flex容器の
`交叉-始端@
側から
`交叉-終端@
側に向けて，容器~内に配置される
◎
Flex lines are filled with items and placed into the container starting on the cross-start side of the flex container and going toward the cross-end side.
</dd>

	<dt class="_dt-size">
交叉size
◎
cross size
</dt>
	<dt class="_dt-size">
交叉size~prop
◎
cross size property
</dt>
	<dd>
<p>［
`~flex容器$／`~flex駒$
］の：
</p>
		<ul>
			<li>
`交叉size@
は、［
`横幅$, `縦幅$
］のうち，`交叉-次元$に属する方を指す。
</li>
			<li>
`交叉size~prop@
は、［
`width$p, `height$p
］のうち，`交叉-次元$に属する方の~propを指す。
</li>
			<li>
`最小-交叉size~prop@
は、［
`min-width$p, `min-height$p
］のうち，`交叉-次元$に属する方の~propを指し，
`最小-交叉size@
を決定する。
</li>
			<li>
`最大-交叉size~prop@
は、［
`max-width$p, `max-height$p
］のうち，`交叉-次元$に属する方の~propを指し，
`最大-交叉size@
を決定する。
</li>
		</ul>
◎
The cross size of a flex container or flex item refers to its width or height, whichever is in the cross dimension.＼
Its cross size property is either its width or height property, whichever is in the cross dimension.＼
Likewise, its min and max cross size properties are its min-width/max-width or min-height/max-height properties, whichever are in the cross dimension, and determine its min/max cross size.
</dd>
</dl>

<p>
この仕様に利用される，~sizingに関する追加的な用語は、
`CSS-SIZING-3$r にて定義される。
◎
Additional sizing terminology used in this specification is defined in CSS Intrinsic and Extrinsic Sizing. [CSS-SIZING-3]
</p>

	</section>
	<section id="flex-containers">
<h2 title="Flex Containers: the flex and inline-flex display values">3. ~flex容器： `display^p 値 `flex^v, `inline-flex^v</h2>

◎名 `display$p
◎新値 `flex$v | `inline-flex$v
◎表終

<dl>
	<dt>`flex@v</dt>
	<dd>
この値は、
要素に`~flex容器$~boxを生成させる
— `~flow~layout$内に配置されたときには、
`塊~level$になるような。
◎
This value causes an element to generate a flex container box that is block-level when placed in flow layout.
</dd>

	<dt>`inline-flex@v</dt>
	<dd>
この値は、
要素に`~flex容器$~boxを生成させる
— `~flow~layout$内に配置されたときには、
`行内~level$になるような。
◎
This value causes an element to generate a flex container box that is inline-level when placed in flow layout.
</dd>
</dl>

<p>
`~flex容器$は、
その内容に対し，新たな
`~flex整形~文脈@
を確立する。
これは、［
その内容の~layoutにおいては、
塊~layoutに代えて~flex~layoutが利用される
］ことを除き，塊~整形~文脈を確立することと同じになる
— 例えば、
`浮動体$が~flex容器~内に侵入することはなく，
~flex容器の~marginとその内容の~marginとの間も相殺されることはない。
`~flex容器$は、
自身の内容~用の包含塊を`塊~容器と正確に同じ様に＠~CSS2J#containing-block-details$形成する
`CSS2$r 。
`overflow$p ~propは、
`~flex容器$にも適用される。
◎
A flex container establishes a new flex formatting context for its contents. This is the same as establishing a block formatting context, except that flex layout is used instead of block layout. For example, floats do not intrude into the flex container, and the flex container’s margins do not collapse with the margins of its contents. Flex containers form a containing block for their contents exactly like block containers do. [CSS2] The overflow property applies to flex containers.
</p>

<p>
~flex容器は`塊~容器$ではないので、
塊~layoutを前提に設計された一部の~propは，
~flex~layoutの文脈~下では適用されない。
特に：
◎
Flex containers are not block containers, and so some properties that were designed with the assumption of block layout don’t apply in the context of flex layout. In particular:
</p>

<ul>
	<li>
`float$p により`~flex駒$が［
浮動される／`~flow外$になる
］ことはない。
`clear$p により~flex駒に`~clearance$が作成されることはない。
◎
float and clear do not create floating or clearance of flex item, and do not take it out-of-flow.
</li>
	<li>
`vertical-align$p は、
~flex駒には効果はない。
◎
vertical-align has no effect on a flex item.
</li>
	<li>
<p>
疑似要素［
`first-line$pe ／ `first-letter$pe
］は、
`~flex容器$には適用されない。
`~flex容器$は、［
`整形される最初の行l$, `最初の字lを成す~text$【！最初の字l】
］を先祖に供与しない。
◎
the ::first-line and ::first-letter pseudo-elements do not apply to flex containers, and flex containers do not contribute a first formatted line or first letter to their ancestors.
</p>

	</li>
</ul>

<div class="p">
<p>
要素の `display$p に `inline-flex$v が指定された場合、
その`算出d値$は，ある種の状況下では `flex$v になる —
`CSS2$r `§ 9.7＠~CSS2J#dis-pos-flo$ の表tは、
次の行を追加するよう改正される：
</p>

<table><thead>
<tr><th>`指定d値$
<th>`算出d値$
<tbody>

<tr><td>`inline-flex$v
<td>`flex$v
</table>

◎
If an element’s specified display is inline-flex, then its display property computes to flex in certain circumstances: the table in CSS 2.1 Section 9.7 is amended to contain an additional row, with inline-flex in the "Specified Value" column and flex in the "Computed Value" column.
</div>

	</section>
	<section id="flex-items">
<h2 title="Flex Items">4. ~flex駒</h2>

<p>
大雑把に言えば、
`~flex駒$とは，［
`~flex容器$の`~flow内$にある内容
］を表現している~boxである。
◎
Loosely speaking, the flex items of a flex container are boxes representing its in-flow contents.
</p>

<p>
`~flex容器$の`~flow内$にある子は，`~flex駒$になり、
子`~text連列$は，［
`匿名$かつ`塊~容器$である`~flex駒$
］で包装される。
しかしながら、
そのような`~text連列$は，全体が`文書~空白$
（すなわち， `white-space$p ~propに影響され得る文字）
のみからなる場合には描画されない
（対応する`~text~node$は `display:none$p にされていたかのように）。
◎
Each in-flow child of a flex container becomes a flex item, and each child text sequence is wrapped in an anonymous block container flex item. However, if the entire text sequences contains only document white space characters (i.e. characters that can be affected by the white-space property) it is instead not rendered (just as if its text nodes were display:none).
</p>

<div class="example">
<p>
~flex駒のいくつかの例：
◎
Examples of flex items:
</p>

<pre class="lang-html">
&lt;div style="`display:flex$p"&gt;

    &lt;!-- <span class="comment">
~flex駒：子~塊
◎
flex item: block child
</span> --&gt;
    &lt;div id="item1"&gt;block&lt;/div&gt;

    &lt;!-- <span class="comment">
~flex駒： 浮動された要素 — その効果は無視される
◎
flex item: floated element; floating is ignored
</span> --&gt;
    &lt;div id="item2" style="`float:left$p;"&gt;float&lt;/div&gt;

    &lt;!-- <span class="comment">
~flex駒： 行内~内容を囲う匿名~塊~box
◎
flex item: anonymous block box around inline content
</span> --&gt;
    anonymous item 3

    &lt;!-- <span class="comment">
~flex駒： 行内の子
◎
flex item: inline child
</span> --&gt;
    &lt;span&gt;
        item 4
        &lt;!-- <span class="comment">
~flex駒は塊の周囲で分割されることはない
◎
flex items do not split around blocks
</span> --&gt;
        &lt;q style="display: block" id=not-an-item&gt;item 4&lt;/q&gt;
        item 4
    &lt;/span&gt;
&lt;/div&gt;
</pre>

<figure>
<figcaption>
上の~code~blockから決定される~flex駒
（`実演＠~CSSWG/css-flexbox/examples/flex-item-determination.html$）
◎
Flex items determined from above code block
◎
alt=
• Flex item containing block.
• Flex item containing float.
• (Anonymous, unstyleable) flex item containing anonymous item 3.
• Flex item containing three blocks in succession:
•• Anonymous block containing item 4.
•• &lt;q&gt; element block containing item 4.
•• Anonymous block containing item 4.
</figcaption>
`flex-item-determination^dgm
</figure>

<p>
要素~間の空白は、
消え去ることに注意
— 要素~間の~textは，自前の匿名~flex駒~内に`包装される^emが、
それでも，空白のみが~flex駒を成すことはない。
◎
Note that the inter-element white space disappears: it does not become its own flex item, even though the inter-element text does get wrapped in an anonymous flex item.
</p>

<p>
匿名~駒の~boxには、
~style規則をアテガう要素がないため，~styleをあてがえないことに注意。
しかしながら、
その内容は，~flex容器から~styleを継承する（~font設定群など）。
◎
Note also that the anonymous item’s box is unstyleable, since there is no element to assign style rules to. Its contents will however inherit styles (such as font settings) from the flex container.
</p>
</div>

<p>
`~flex駒$は、
その内容~用に`独立な整形~文脈を確立する$。
しかしながら，~flex駒~自体は、
`塊~level$の~boxではなく，
`~flex~level@
の~boxになる：
それらは、
塊~整形~文脈ではなく，容器の~flex整形~文脈に関与する。
◎
A flex item establishes an independent formatting context for its contents. However, flex items themselves are flex-level boxes, not block-level boxes: they participate in their container’s flex formatting context, not in a block formatting context.
</p>

<hr />

<p class="note">注記：
この仕様を読む~web~page作者【 以下，単に “作者” 】は、
以下に与える~box生成と静的~位置についての詳細を飛ばして，
`先に進んでも＠#item-margins$よい。
◎
Note: Authors reading this spec may want to skip past the following box-generation and static position details.
</p>

<p>
所与の要素に対し，［
その先祖であって `display$p の`算出d値$が `contents^v でないもののうち，要素に最も近いもの
］の `display$p の`算出d値$が［
`flex$v ／ `inline-flex$v
］である場合、
要素の自前の `display$p 値は，`塊~化$される。
（この種の `display$p 値の変換の詳細は、
`CSS2.1 § 9.7＠~CSS2J#dis-pos-flo$
`CSS2$r と
`§ ~box型の自動的な変形n＠~CSSDISP#transformations$
`CSS-DISPLAY-3$r
を見よ。）
◎
If the computed display value of an element’s nearest ancestor element (skipping display:contents ancestors) is flex or inline-flex, the element’s own display value is blockified. (See CSS2.1§9.7 [CSS2] and CSS Display 3 § 2.7 Automatic Box Type Transformations for details on this type of display value conversion.)
</p>

<p class="note">注記：
この塊~化は、
当の［
`flex^v ／ `inline-flex^v
］にされた先祖が`~flex容器$を生成しない場合でも，依然として生じる
— 例： それが［
`置換され$る ／ `display:none$p にされた下位tree内にある
］場合でも。
◎
Note: Blockification still occurs even when the flex or inline-flex element does not end up generating a flex container box, e.g. when it is replaced or in a display: none subtree.
</p>

<p class="note">注記：
`display$p の値のうち，一部のものは、
通常は，元の~boxを囲う匿名~boxの作成を誘発する。
そのような~boxが`~flex駒$であった場合、
最初に`塊~化$されるので，匿名~boxの作成は起こらない。
例えば，連続する 2 個の［
`display:table-cell$p にされた子~要素
］が与えられた下では、
その 2 個が単独の匿名~table~boxに包装されることはなく，
別々な `display:block$p にされた`~flex駒$になる。
◎
Note: Some values of display normally trigger the creation of anonymous boxes around the original box. If such a box is a flex item, it is blockified first, and so anonymous box creation will not happen. For example, two contiguous flex items with display: table-cell will become two separate display: block flex items, instead of being wrapped into a single anonymous table.
</p>

<p>
`~flex駒$が `display:table$p にされた事例では、
その~flex駒が`~table包装~box$になるので，
`align-self$p ~propも適用される。
~caption~boxもあれば、
その内容は~table包装~boxの［
`最小-内容~size$, `最大-内容~size$
］の計算に供与される。
しかしながら，［
`width$p, `height$p
］と同様、
`flex$p の各種 下位propは，次に従うように~table~boxに適用される：
`~flex駒$ の最終的な~sizeは、［［
~table包装~boxの各~辺と~table~boxの各~内容~辺との合間の距離
］が［
~table~boxの ~borderと~padding区画の全部
］を成していて, ~table~boxは`~flex駒$であった
］かのように，~layoutを遂行することにより計算される。
◎
In the case of flex items with display: table, the table wrapper box becomes the flex item, so the align-self property applies to it. The contents of any caption boxes contribute to the calculation of the table wrapper box’s min-content and max-content sizes. However, like width and height, the flex longhands apply to the table box as follows: the flex item’s final size is calculated by performing layout as if the distance between the table wrapper box’s edges and the table box’s content edges were all part of the table box’s border+padding area, and the table box were the flex item.
</p>

		<section id="abspos-items">
<h3 title="Absolutely-Positioned Flex Children">4.1. 絶対的に位置された子 ~flex</h3>

<p>
`~flex容器$（以下，この節では単に %容器 と記す）の子のうち，
`絶対的に位置され$たもの（以下，単に %子 と記す）は、
`~flow外$にあるので，~flex~layoutには関与しない。
◎
As it is out-of-flow, an absolutely-positioned child of a flex container does not participate in flex layout.
</p>

<p>
%子 の`静的~位置~矩形$を成す各~辺は：
◎
↓</p>
<ul>
	<li>
`交叉-軸$においては
⇒
%容器 の`内容~辺$に一致する。
◎
The cross-axis edges of the static-position rectangle of an absolutely-positioned child of a flex container are the content edges of the flex container.＼
</li>
	<li>
`主-軸$においては
⇒
%子 も %容器 も［
その~sizeは，各自の使用~sizeに固定された~boxである
］と見做す下で、［
%子 が %容器 の中の唯一の`~flex駒$であった
］とするとき［
%子 の`~margin辺$が位置する所
］に一致する。
（この目的においては、
%子 の~marginに対する `auto^v は 0 として扱われる。）
◎
The main-axis edges of the static-position rectangle are where the margin edges of the child would be positioned if it were the sole flex item in the flex container, assuming both the child and the flex container were fixed-size boxes of their used size. (For this purpose, the child’s auto margins are treated as zero.)
</li>
</ul>

<div class="example">
<p>
このことから、
例えば， %子 に `align-self:center$p を設定した場合、
%子 に対する `auto^v による~offsetは，
%容器 の`交叉-軸$において中央に寄せることになる。
◎
The effect of this is that if you set, for example, align-self: center; on an absolutely-positioned child of a flex container, auto offsets on the child will center it in the flex container’s cross axis. 
</p>
</div>

		</section>
		<section id="item-margins">
<h3 title="Flex Item Margins and Paddings">4.2. ~flex駒の~marginと~padding</h3>

<p>
隣接な 2 個の`~flex駒$の~marginは`相殺-$されない。
◎
The margins of adjacent flex items do not collapse.
</p>

<p>
`~flex駒$ %駒 上の百分率による［
~margin／~padding
］は、
%駒 の`包含塊$の`行内~size$を基準に解決される
— `塊~box$のときと同様に。
例えば，`横組み$の下では、［
左端, 右端, 上端, 下端
］のいずれも，百分率は包含塊の横幅を基準に解決される。
◎
Percentage margins and paddings on flex items, like those on block boxes, are resolved against the inline size of their containing block, e.g. left/right/top/bottom percentages all resolve against their containing block’s width in horizontal writing modes.
</p>

<p>
自動~marginは、
対応する次元の余った空間を吸収するよう拡幅される。
これを利用すれば、
~flex駒に対し［
互いを整列させたり, 隣接なものを離れた所へ押出す
］ことができる。
`~auto_v~margin$による整列-法を見よ。
◎
Auto margins expand to absorb extra space in the corresponding dimension. They can be used for alignment, or to push adjacent flex items apart. See Aligning with auto margins.
</p>

		</section>
		<section id="painting">
<h3 title="Flex Item Z-Ordering">4.3. ~flex駒の z ~~方向の順序付け</h3>

<p>
`~flex駒$は、
次の二点を除いて，行内~塊 `CSS2$r と正確に同じに塗られる：
◎
Flex items paint exactly the same as inline blocks [CSS2], except that＼
</p>
<ul>
	<li>
そのままの文書~順序に代えて，
`order$p により`改変された文書~順序$が利用される。
◎
order-modified document order is used in place of raw document order,＼
</li>
	<li>
`position$p が `static^v であっても、［
`auto^v 以外の `z-index$p 値
］により，積層~文脈が作成される
（ `position$p が `relative^v であったときと正確に同じに挙動する）。
◎
and z-index values other than auto create a stacking context even if position is static (behaving exactly as if position were relative).
</li>
</ul>

<p class="note">注記：
~flex駒の子孫は、
駒の外側に位置させられても，駒により確立される積層~文脈に関与する。
◎
Note: Descendants that are positioned outside a flex item still participate in any stacking context established by the flex item.
</p>

		</section>
		<section id="visibility-collapse">
<h3 title="Collapsed Items">4.4. 畳まれる駒</h3>

<p>
~flex駒~上にて
`visibility:collapse$p
を指定することにより，~flex駒は
`畳まれ@
、［
`table-row^v や `table-column^v 上の `visibility:collapse$p
］と類似な効果を生産する：
`畳まれ$た~flex駒は，描画~対象からは まるごと外されるが、
~flex行lの`交叉size$を安定に保つため，
“支柱【概念的な突っ支い棒】” だけ居残るようにされる。
したがって，~flex容器の~flex行lが一本だけの場合、
駒が`畳まれ$るかどうかが動的に~~変化しても
— `~flex容器$の`主size$は変化し得るが —
`交叉size$に対する効果は無く，
~pageの~layoutの残りの部分を “揺らがす” ことはないことが保証される。
一方で，`複-行f$な【！複数~行fを伴う】~flex容器の`交叉size$は、［
~flex行lの折返ngが，駒を畳んだ後にも`再び行われる^em†
］ので，変化し得る。
◎
Specifying visibility:collapse on a flex item causes it to become a collapsed flex item, producing an effect similar to visibility:collapse on a table-row or table-column: the collapsed flex item is removed from rendering entirely, but leaves behind a "strut" that keeps the flex line’s cross-size stable. Thus, if a flex container has only one flex line, dynamically collapsing or uncollapsing items may change the flex container’s main size, but is guaranteed to have no effect on its cross size and won’t cause the rest of the page’s layout to "wobble". Flex line wrapping is re-done after collapsing, however, so the cross-size of a flex container with multiple lines might or might not change.
</p>

<p class="trans-note">【
“畳む”（ `collapse^en する）
— ~marginの~~相殺（ `collapse^en ）とは ある~~意味~~似て異なる
（一般英語としては同じ概念であろうが）。
】【†
すなわち，駒が`畳まれ$ることにより、
次の行fに折返された後続の駒が，駒と同じ行fに繰り上げられる。
】</p>

<p>
`畳まれ$た~flex駒は描画されないが，`整形~構造$には現れる。
従って，
`display:none$p `CSS2$r
にされた駒と異なり、
整形~構造の下で~boxの出現に依存する効果
（ `counter^en の増加, あるいは~animationや遷移【 CSS Animation, CSS Transition 】を走らす, 等々）は、
依然として，`畳まれ$た駒に対しても演算される。
◎
Though collapsed flex items aren’t rendered, they do appear in the formatting structure. Therefore, unlike on display:none items [CSS2], effects that depend on a box appearing in the formatting structure (like incrementing counters or running animations and transitions) still operate on collapsed items.
</p>

<div class="example">
<p>
次の例では、
左に位置する~sidebarが，その内容を収めるよう~sizeされる。
~navi~sidebarの部品を
— その最も幅広な駒（ “Architecture” ）が畳まれる区分に入っているとしても，
~sidebarの横幅に影響しないよう —
動的に隠すために， `visibility:collapse$p が利用される。
◎
In the following example, a sidebar is sized to fit its content. visibility: collapse is used to dynamically hide parts of a navigation sidebar without affecting its width, even though the widest item (“Architecture”) is in a collapsed section.
</p>

<figure>

<figcaption>
下記の~code例の生きた描画~見本：
◎
Sample live rendering for example code below
</figcaption>

<div id="_ex-visibility-collapse">
	`ex-visibility-collapse-menu^dgm
	<article>
左の~menu上を~hoverすると、
~hoverされた~menu項目は，その下位~駒を示すよう拡幅される。
~sidebarの横幅（および この主-区画の横幅）を安定に保つため、
`display:none$p に代えて，
`visibility:collapse$p が利用される。
この結果，~sidebarは常に、
普段は可視でない長めの単語 “Architecture” にも十分な幅がとられる。
◎
Hover over the menu to the left: each section expands to show its sub-items. In order to keep the sidebar width (and this main area width) stable, visibility: collapse is used instead of display: none. This results in a sidebar that is always wide enough for the word “Architecture”, even though it is not always visible.
	</article>
</div>

<p class="trans-note">【
この~pageの実際の~codeでは、
（~flex~layoutを~supportしない~browserでも~~動作するよう，）
等価な挙動を模倣する~styleがあてがわれている。
】</p>
</figure>

<pre class="lang-css">
@media (`min-width$d: 60em) {
  /* <span class="comment">
（既定の~text~sizeに比して）十分な部屋があるときだけ， 2 本の~colで~layoutする◎
two column layout only when enough room (relative to default text size)
</span> */
  div { `display:flex$p; }
  #main {
    `flex:1$p;         /* <span class="comment">
残りの空間すべては <code class="css">#main</code> が占める
◎
Main takes up all remaining space
</span> */
    `order:1$p;        /* <span class="comment">
~navi（ <code class="element">nav</code> ）の後ろ（右側）に配置する
◎
Place it after (to the right of) the navigation
</span> */
    `min-width:12em$p; /* <span class="comment">
主-内容~区画の~sizingを最適化する
◎
Optimize main content area sizing
</span> */
  }
}
/* <span class="comment">
`visibility:collapse$p が働くよう，~menu項目には~flex~layoutを利用する
◎
menu items use flex layout so that visibility:collapse will work
</span> */
nav &gt; ul &gt; li {
  `display:flex$p;
  `flex-flow:column$p;
}
/* <span class="comment">
操作中でない下位~menuは，動的に畳まれる
◎
dynamically collapse submenus when not targeted
</span> */
nav &gt; ul &gt; li:not(:target):not(:hover) &gt; ul {
  `visibility:collapse$p;
}
</pre>

<pre class="lang-html">
&lt;/header&gt;
&lt;div&gt;
  &lt;article id="main"&gt;
    Interesting Stuff to Read
  &lt;/article&gt;
  &lt;nav&gt;
    &lt;ul&gt;
      &lt;li id="nav-about"&gt;&lt;a href="#nav-about"&gt;About&lt;/a&gt;
        …
      &lt;li id="nav-projects"&gt;&lt;a href="#nav-projects"&gt;Projects&lt;/a&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="…"&gt;Art&lt;/a&gt;
          &lt;li&gt;&lt;a href="…"&gt;Architecture&lt;/a&gt;
          &lt;li&gt;&lt;a href="…"&gt;Music&lt;/a&gt;
        &lt;/ul&gt;
      &lt;li id="nav-interact"&gt;&lt;a href="#nav-interact"&gt;Interact&lt;/a&gt;
        …
    &lt;/ul&gt;
  &lt;/nav&gt;
&lt;/div&gt;
&lt;footer&gt;
…
</pre>
</div>

<p>
`支柱~size$を算出するためには：
◎
To compute the size of the strut,＼
</p>
<ol>
	<li>
最初に，すべての駒は`畳まれ$ないとする下で ~flex~layoutを遂行する。
◎
flex layout is first performed with all items uncollapsed,＼
</li>
	<li>
次に，`畳まれ$る各`~flex駒$を［
駒の元の行fの元の`交叉size$を保守するような支柱
］に置換した上で、
~flex~layoutを再び走らす。
◎
and then re-run with each collapsed flex item replaced by a strut that maintains the original cross-size of the item’s original line.＼
</li>
</ol>

<p>
`visibility:collapse$p
が，~flex~layoutにどう作用するかについての規範的な定義は、
`§ ~flex~layout~algo$を見よ。
◎
See the Flex Layout Algorithm for the normative definition of how visibility:collapse interacts with flex layout.
</p>

<p class="note">注記：
~flex駒における `visibility:collapse$p の利用は、
最も高価な手続きである
~flex~layout~algoを，~~部分的に繰返し走らすことになる。
作者には、`畳まれ$るかどうかが動的に~~変化しない駒を隠す際には、
`display:none$p を利用し続けることが推奨される。
その方が~layout~engineにとってはより効率的になるので。
（しかしながら， `visibility$p の変化-時には，手続きの必要な部分のみ繰返されるので、
動的な場合には，依然として
`visibility:collapse$p
が推奨される。）
◎
Note: Using visibility:collapse on any flex items will cause the flex layout algorithm to repeat partway through, re-running the most expensive steps. It’s recommended that authors continue to use display:none to hide items if the items will not be dynamically collapsed and uncollapsed, as that is more efficient for the layout engine. (Since only part of the steps need to be repeated when visibility is changed, however, 'visibility: collapse' is still recommended for dynamic cases.)
</p>

		</section>
		<section id="min-size-auto">
<h3 title="Automatic Minimum Size of Flex Items">4.5. ~flex駒の自動的な最小~size</h3>

<p class="note">注記：
`自動的な最小~size$を表現する `~autoS$v ~keywordは、［
`min-width$p ／ `min-height$p
］~propの新たな初期~値である。
この~keywordは、
この仕様にて以前に定義されていたが，
今や `CSS-SIZING-3$r ~moduleにて定義される。
◎
Note: The auto keyword, representing an automatic minimum size, is the new initial value of the min-width and min-height properties. The keyword was previously defined in this specification, but is now defined in the CSS Sizing module.
</p>

<div class="algo">
<p>
所与の`~flex駒$ %駒 の`主-軸$における`自動的な最小~size$の使用~値は、
より適度な既定の`最小~size$を供するため，次に従う
— それは、
%駒 の `overflow$p の`算出d値$に応じて：
◎
To provide a more reasonable default minimum size for flex items, the used value of a main axis automatic minimum size on a flex item＼
</p>
<ul>
	<li>
`~scroll可能な値$でないならば
⇒
%駒 の`内容に基づく最小~size$
◎
whose computed overflow value is non-scrollable is its content-based minimum size;＼
</li>
	<li>
他の場合（ %駒 は`~scroll容器$である）
⇒
【！for scroll containers】 通例通り 0
◎
for scroll containers the automatic minimum size is zero, as usual.
</li>
</ul>
</div>

<div class="algo">
<div class="p">
<p>
%駒 の
`内容に基づく最小~size@
は
⇒
`min^op( %最終-~size示唆, %最大~主size )
</p>

<p>
ここで：
</p>
<ul>
	<li>
<p>
%最終-~size示唆 は：
</p>
		<ul>
			<li>
%駒 は`置換され$るならば
⇒
`min^op( %駒 の`内容~size示唆$, %~size示唆 )
</li>
			<li>
他の場合
⇒
`max^op( %駒 の`内容~size示唆$, %~size示唆 )
</li>
		</ul>
	</li>
	<li>
%~size示唆 は
⇒
`max^op( %駒 の`転換~size示唆$, %駒 の`指定d~size示唆$ )
（どちらも ε ならば結果は ε ）
</li>
</ul>

◎
The content-based minimum size of a flex item differs depending on whether the flex item is replaced or not:
◎
For replaced elements
• Use the smaller of the content size suggestion and the transferred size suggestion (if one exists), capped by the specified size suggestion (if one exists).
◎
For non-replaced elements
• Use the larger of the content size suggestion and the transferred size suggestion (if one exists), capped by the specified size suggestion (if one exists).
◎
In either case, the size is clamped by the maximum main size if it’s definite.
</div>

<p>
上で利用される %駒 の各種~size示唆, その他は、
以下で定義される
（これらには、
`内容に基づく最小~size$が作者から供された拘束に干渉しないよう，関連な［
`選好d$sz ／ `最大$sz ／ `最小$sz
］~sizeも織り込まれる）：
◎
The content size suggestion, specified size suggestion, and transferred size suggestion used in this calculation account for the relevant min/max/preferred size properties so that the content-based minimum size does not interfere with any author-provided constraints, and are defined below:
</p>
<ul>
	<li>
<p>
`指定d~size示唆@
：
◎
specified size suggestion
</p>
		<ul>
			<li>
［
%選好d~主size ~NEQ ε
］~AND［
%選好d~主size は`自動的~size$でない
］ならば
⇒
%選好d~主size
◎
If the item’s preferred main size is definite and not automatic, then the specified size suggestion is that size.＼
</li>
			<li>
他の場合
⇒
ε
◎
It is otherwise undefined.
</li>
		</ul>
	</li>
	<li>
<p>
`転換~size示唆@
：
◎
transferred size suggestion
</p>
		<ul>
			<li>
［
%縦横比 ~NEQ ε
］~AND［
%選好d~交叉size ~NEQ ε
］ならば
⇒
`max^op( `min^op( %選好d~交叉size, %最大~交叉size ), %最小~交叉size ) ~MUL %縦横比
◎
If the item has a preferred aspect ratio and its preferred cross size is definite, then the transferred size suggestion is that size (clamped by its minimum and maximum cross sizes if they are definite), converted through the aspect ratio.＼
</li>
			<li>
他の場合
⇒
ε
◎
It is otherwise undefined.
</li>
		</ul>
	</li>
	<li>
<p>
`内容~size示唆@
：
◎
content size suggestion
</p>
		<ul>
			<li>
%縦横比 ~EQ ε ならば
⇒
%最小~内容~size
◎
The content size suggestion is the min-content size in the main axis,＼
</li>
			<li>
他の場合
⇒
`max^op( `min^op( %最小~内容~size ~DIV %縦横比, %最大~交叉size ), %最小~交叉size ) ~MUL %縦横比
◎
clamped, if it has a preferred aspect ratio, by any definite minimum and maximum cross sizes converted through the aspect ratio.
</li>
		</ul>
	</li>
</ul>

<div>
<p>
上における：
</p>
<ul>
	<li>
［
`min^op(…) ／ `max^op(…)
］は、
各~引数の［
最小／最大
］値をとる関数であり，引数のうち ε を値にとるものは無視するとする。
</li>
	<li>
ε は、
値が［
定義されない／`確定的$でない
］ことを表す定数である。
</li>
	<li>
［
%選好d~主size ／ %最大~主size
］は、
`主-軸$における %駒 の［
`選好d~size$ ／ `最大~size$
］を表すとする。
［
%選好d~交叉size ／ %最大~交叉size ／ %最小~交叉size
］は、
`交叉-軸$における %駒 の［
`選好d~size$ ／ `最大~size$ ／`最小~size$
］を表すとする。
これらはそれぞれ、
`確定的$でない場合は ε になるとする。
</li>
	<li>
%縦横比 は、
%駒 は`選好d縦横比$を有するならば［
`主-軸$における~size ~DIV `交叉-軸$における~size 
］を表すそれ ／
~ELSE_ ε とする。
</li>
	<li>
%最小~内容~size は、
`主-軸$における %駒 の`最小-内容~size$とする。
</li>
</ul>
◎
↑</div>
</div>

<p class="note">注記：
`内容に基づく最小~size$は、
`内在的~size供与$の一種なので，
`CSS-SIZING-3$r
`§ 内在的~供与＠~SIZING#intrinsic-contribution$
における循環な百分率の条項が適用される。
◎
Note: The content-based minimum size is a type of intrinsic size contribution, and thus the cyclic percentage provisions in CSS Sizing 3 § 5.2 Intrinsic Contributions apply.
</p>

<p>
`内容に基づく最小~size$は：
◎
↓</p>
<ul>
	<li>
~boxの内在的~size（例： 要素の`最小-内容~size$）を計算する目的においては、
当の軸における~boxの~sizeを不定にする
（例えば，~boxの `width$p ~propが`確定的$な~sizeを指定していても）。
したがって、
この~sizeを基準に計算される百分率は，
`~autoとして挙動する$ようになることに注意。
◎
For the purpose of calculating an intrinsic size of the box (e.g. the box’s min-content size), a content-based minimum size causes the box’s size in that axis to become indefinite (even if e.g. its width property specifies a definite size). Note this means that percentages calculated against this size will behave as auto.
</li>
	<li>
内在的~sizeを計算する`以外^emの目的においては、
~boxの~sizeが不定になるよう強制しない
（明示的な `min-content$v, 等々や`最小~size$と違って）。
しかしながら、
ある百分率が，この最小が適用される`より前^emに~boxの~sizeを基準に解決される場合、
それを適用した後の新たな~sizeを基準に，それ【内在的~size以外の何か？】を解決し直すモノトスル。
◎
For any purpose other than calculating intrinsic sizes, a content-based minimum size (unlike an explicit min-content/etc minimum size) does not force the box’s size to become indefinite. However, if a percentage resolved against the box’s size before this minimum was applied, it must be re-resolved against the new size after it is applied.
</li>
</ul>

<div class="note" id="min-size-opt">
<p>
大抵の場合、
内容に基づく最小~sizeは適切であり，［
内容が重合する／容器の外側に溢れる
］ことはないようにするが、
一部の事例ではそうならない：
◎
Note that while a content-based minimum size is often appropriate, and helps prevent content from overlapping or spilling outside its container, in some cases it is not:
</p>

<p>
特に，文書の~~主要な内容~区画に~flex~sizingを利用する場合、
~font~sizeに相対的な最小~横幅（ `min-width:12em$p など）を明示的に設定した方がよい。
最小~横幅が内容に基づく場合、
巨大な［
~tableや画像
］があるときに，内容~区画~全体の~sizeを~overflowする地帯にまで伸張させ、
~text行lを無用に~~長く, 読みづらくさせることになる。
◎
In particular, if flex sizing is being used for a major content area of a document, it is better to set an explicit font-relative minimum width such as min-width: 12em. A content-based minimum width could result in a large table or large image stretching the size of the entire content area into an overflow zone, and thereby making lines of text gratuitously long and hard to read.
</p>

<p>
多量な内容を伴う駒に内容に基づく~sizingを利用した場合、
~layout~engineは，その最小~sizeを見出す前に その内容~すべてを辿らなければならなくなる。
作者が明示的な最小~sizeを設定しておけば、
これは必要yでない。
（駒の内容が少量なら、
この辿りは些細になるので，処理能の懸念はない）
◎
Note also, when content-based sizing is used on an item with large amounts of content, the layout engine must traverse all of this content before finding its minimum size, whereas if the author sets an explicit minimum, this is not necessary. (For items with small amounts of content, however, this traversal is trivial and therefore not a performance concern.)
</p>
</div>

		</section>
	</section>
	<section id="flow-order">
<h2 title="Ordering and Orientation">5. 順序付けと方位</h2>

<p>
~flex容器の内容は、
任意の方向, 任意の順序で~lay-outできる。
これにより、
作者は，以前までは［
複階的, あるいは不安定
］な手法
— `float$p, `clear$p ~propの併用による~hackなど —
を要していた効果も自明に得られるようになる。
この機能性は［
`flex-direction$p,
`flex-wrap$p,
`order$p
］~propを通して公開される。
◎
The contents of a flex container can be laid out in any direction and in any order. This allows an author to trivially achieve effects that would previously have required complex or fragile methods, such as hacks using the float and clear properties. This functionality is exposed through the flex-direction, flex-wrap, and order properties.
</p>

<p class="note">注記：
~flex~layoutによる並替ngの能力が影響するのは、
意図的に，`~~描画（視覚的な具現化）に限られる^em
— 発話~順序, ~source順序に基づく~naviは、
そのままにされる。
これは、
作者が，視覚的な呈示を［
非~CSS~UA／
発話や連列的~naviなどの一次元な~model
］用の~source順序に触れることなく操作することを許容する。
この［
~accessibilityを改善する分岐
］の用例については、
次を見よ
⇒＃
`CSS-DISPLAY-3$r `§ 並替ngと~accessibility＠~CSSDISP#order-accessibility$,
`§ ~flex~layout概観＠#overview$
◎
Note: The reordering capabilities of flex layout intentionally affect only the visual rendering, leaving speech order and navigation based on the source order. This allows authors to manipulate the visual presentation while leaving the source order intact for non-CSS UAs and for linear models such as speech and sequential navigation. See Reordering and Accessibility and the Flex Layout Overview for examples that use this dichotomy to improve accessibility.
</p>

<p class="advisement"><strong>
作者は、［
`flex-flow$p ／ `flex-direction$p
］の `*-reverse^v 値を，
~source順序付けを正すための代用として利用しては`ナラナイ^em。
文書の~accessibilityを損ないかねないので。
</strong>
◎
Authors must not use order or the *-reverse values of flex-flow/flex-direction as a substitute for correct source ordering, as that can ruin the accessibility of the document.
</p>

		<section id="flex-direction-property">
<h3 title="Flex Flow Direction: the flex-direction property">5.1. ~flexの~flow方向： `flex-direction^p ~prop</h3>

◎名 `flex-direction@p
◎値
`row$v |
`row-reverse$v |
`column$v |
`column-reverse$v
◎初 `row$v
◎適 `~flex容器$
◎継 されない
◎百 受容しない
◎算 指定された~keyword
◎順 文法に従う
◎ア 離散的
◎表終

<p>
`flex-direction$p ~propは、［
~flex容器の`主-軸$の方向を設定する
］ことにより［
`~flex駒$が，当の~flex容器の中で どう配置されるか
］を指定する。
これは、［
~flex駒たちが~lay-outされていく方向
］を決定する：
◎
The flex-direction property specifies how flex items are placed in the flex container, by setting the direction of the flex container’s main axis. This determines the direction in which flex items are laid out.
</p>

<dl>
	<dt>`row@v</dt>
	<dd>
~flex容器の`主-軸$は、［
現在の【当の容器の】`書字~mode$の`行内-軸$
］と同じ方位になる。
［
`主-始端$／`主-終端$
］の方向は、
現在の`書字~mode$の［
`行内-始端$／`行内-終端$
］方向に等価になる。
◎
The flex container’s main axis has the same orientation as the inline axis of the current writing mode. The main-start and main-end directions are equivalent to the inline-start and inline-end directions, respectively, of the current writing mode.
</dd>

	<dt>`row-reverse@v</dt>
	<dd>
`主-始端$と`主-終端$
の方向が入換わることを除き， `row$v と同じ。
◎
Same as row, except the main-start and main-end directions are swapped.
</dd>

		<dt>`column@v</dt>
		<dd>
~flex容器の`主-軸$は、［
現在の`書字~mode$の`塊-軸$
］と同じ方位になる。
［
`主-始端$／`主-終端$
］の方向は、
現在の`書字~mode$の［
`塊-始端$／`塊-終端$
］の方向に等価になる。
◎
The flex container’s main axis has the same orientation as the block axis of the current writing mode. The main-start and main-end directions are equivalent to the block-start and block-end directions, respectively, of the current writing mode.
</dd>

		<dt>`column-reverse@v</dt>
		<dd>
`主-始端$と`主-終端$
の方向が入換わることを除き， `column$v と同じ。
◎
Same as column, except the main-start and main-end directions are swapped.
</dd>
</dl>

<p class="note">注記：
`flex-direction$p 用の値［
`row-reverse$v ／ `column-reverse$v
］は、
~boxの順序付けを “逆順” にするものではない。
それらが変化させるのは
— `writing-mode$p, `direction$p `CSS3-WRITING-MODES$r と同様に —
~flow方向に限られ，［
塗ng／発話／連列的~navi
］の順序は影響されない。
◎
Note: The reverse values do not reverse box ordering: like writing-mode and direction [CSS3-WRITING-MODES], they only change the direction of flow. Painting order, speech order, and sequential navigation orders are not affected.
</p>

<p class="note">注記：
`flex-direction$p 用の値［
`row-reverse$v ／ `column-reverse$v
］は、
当の`~flex容器$が`~scroll容器$でもある場合に
— `justify-content$p の値に依存して —
その初期~scroll位置を改得る。
`CSS-ALIGN-3$r `§ ~overflowと~scroll位置＠~CSSALIGN#overflow-scroll-position$
を見よ。
◎
Note: Depending on the value of justify-content, the reverse values of flex-direction can alter the initial scroll position on flex containers that are also scroll containers. See CSS Box Alignment 3 § 5.3 Overflow and Scroll Positions.
</p>

		</section>
		<section id="flex-wrap-property">
<h3 title="Flex Line Wrapping: the flex-wrap property">5.2. ~flex行lの折返ng： `flex-wrap^p ~prop</h3>

◎名 `flex-wrap@p
◎値
`nowrap$v |
`wrap$v |
`wrap-reverse$v
◎初 `nowrap$v
◎適 `~flex容器$
◎継 されない
◎百 受容しない
◎算 指定された~keyword
◎順 文法に従う
◎ア 離散的
◎表終

<div class="p">
<p>
`flex-wrap$p ~propは、
次の 2 つを制御する：
</p>

<ul>
	<li>
~flex容器は［
`単-行f$, `複-行f$
］どちらになるか。
</li>
	<li>
~flex容器の`交叉-軸$の向き
— これは、
~flex容器~内で新たな行fが堆積されていく方向（順方向か逆方向か）を決定する。
</li>
</ul>
◎
The flex-wrap property controls whether the flex container is single-line or multi-line, and the direction of the cross-axis, which determines the direction new lines are stacked in.
</div>

<dl>
	<dt>`nowrap@v</dt>
	<dd>
~flex容器は`単-行f$になる。
◎
The flex container is single-line.
</dd>
	<dd>
`交叉-軸$の向きは、
`wrap$v のときと同じになる。
◎
↓↓</dd>

	<dt>`wrap@v</dt>
	<dd>
~flex容器は`複-行f$になる。
◎
The flex container is multi-line.
</dd>
	<dd>
`交叉-軸$の向きは、
順方向
— すなわち、`交叉-始端$は［
現在の`書字~mode$の［
`行内-始端$, `塊-始端$
］のうち`交叉-軸$に属する方
］になり，`交叉-終端$はその反対側になる。
◎
↓↓</dd>

	<dt>`wrap-reverse@v</dt>
	<dd>
~flex容器は`複-行f$になる。
◎
Same as wrap.
</dd>
	<dd>
`交叉-軸$の向きは、
逆方向
— すなわち、［
`交叉-始端$, `交叉-終端$
］は `wrap$v のときと入換わる。
◎
For the values that are not wrap-reverse, the cross-start direction is equivalent to either the inline-start or block-start direction of the current writing mode (whichever is in the cross axis) and the cross-end direction is the opposite direction of cross-start. When flex-wrap is wrap-reverse, the cross-start and cross-end directions are swapped.
</dd>
</dl>

<p class="note">注記：
`flex-wrap$p 用の値 `wrap-reverse$v は、
当の`~flex容器$が`~scroll容器$でもある場合に
— `align-content$p の値に依存して —
その初期~scroll位置を改得る。
`CSS-ALIGN-3$r `§ ~overflowと~scroll位置＠~CSSALIGN#overflow-scroll-position$
を見よ。
◎
Note: Depending on the value of align-content, the wrap-reverse value of flex-wrap can alter the initial scroll position on flex containers that are also scroll containers. See CSS Box Alignment 3 § 5.3 Overflow and Scroll Positions.
</p>

		</section>
		<section id="flex-flow-property">
<h3 title="Flex Direction and Wrap: the flex-flow shorthand">5.3. ~flexの~flow方向と折返ng： `flex-flow^p 略式~prop</h3>

◎名 `flex-flow@p
◎値 `flex-direction$tp || `flex-wrap$tp
◎初 個々の~propを見よ
◎適 個々の~propを見よ
◎継 個々の~propを見よ
◎百 個々の~propを見よ
◎算 個々の~propを見よ
◎順 文法に従う
◎ア 個々の~propを見よ
◎表終

<p>
`flex-flow$p ~propは，［
`flex-direction$p, `flex-wrap$p
］~propを設定するための略式~propであり，
~flex容器の［
主-軸, 交叉-軸
］を同時に定義する。
◎
The flex-flow property is a shorthand for setting the flex-direction and flex-wrap properties, which together define the flex container’s main and cross axes.
</p>

<div class="example">
<p>
英語~文書（ `left-to-right^en【！＊】, `横組み$）の下での妥当な~flowの例：
◎
Some examples of valid flows in an English (left-to-right, horizontal writing mode) document:
</p>

<dl>
	<dt>`flex-flow:row$p</dt>
	<dd>
<p>
初期~値。
主-軸は行内, 折返ngなし。
（駒たちは，容器に収まるよう縮短されるか, または~overflowする。)
◎
Initial value. Main-axis is inline, no wrapping.
(Items will either shrink to fit or overflow.)
</p>

`flex-flow1^dgm

	<dd>
	<dt>`flex-flow:column wrap$p</dt>
	<dd>
<p>
主-軸は塊~方向（上端から下端へ）になり,
各~行fは行内~方向（右方）に折返される。
◎
Main-axis is block-direction (top to bottom)
and lines wrap in the inline direction (rightwards).
</p>

`flex-flow2^dgm

	<dd>
	<dt>`flex-flow:row-reverse wrap-reverse$p</dt>
	<dd>
<p>
主-軸は行内~方向の反対（右端から左端へ）。
新たな行fは上方に折返される。
◎
Main-axis is the opposite of inline direction
(right to left). New lines wrap upwards.
</p>

`flex-flow3^dgm
	<dd>
</dl>
</div>

<div class="note">
<p>注記：
`flex-flow$p 方向は`書字~mode$に感応する。
縦書き日本語の下では、
`row$v ~flex容器は，その内容を
— 例えば，次の様に —
上端から下端へ~lay-outする。
◎
Note that the flex-flow directions are writing mode sensitive. In vertical Japanese, for example, a row flex container lays out its contents from top to bottom, as seen in this example:
</p>

<dl>
	<dt title="English">横書き（英語）</dt>
	<dd>
<pre class="lang-css">
`flex-flow:row wrap$p;
`writing-mode:horizontal-tb$p;
</pre>

`flex-flow-english^dgm
	</dd>

	<dt title="Japanese">縦書き（日本語）</dt>
	<dd>
<pre class="lang-css">
`flex-flow:row wrap$p;
`writing-mode:vertical-rl$p;
</pre>

`flex-flow-japanese^dgm
</dd>
</dl>
</div>

		</section>
		<section id="order-property">
<h3 title="Item Reordering: the order property">5.4. 駒の並替ng： `order$p ~prop</h3>

<p>
`~flex駒$たちは，既定では、
それらが~source文書に現れるのと同じ順序で表示され, ~lay-outされる
— それは、
それらの論理的な順序付けを表現する。
この順序は、
次のいずれかに該当する場合にも利用される：
◎
Flex items are, by default, displayed and laid out in the same order as they appear in the source document, which represents their logical ordering. This same order is used＼
</p>
<ul>
	<li>
視覚的でない媒体（`発話＠~CSSSPEECH$など）における具現化。
◎
in rendering to non-visual media (such as speech),＼
</li>
	<li>
連列的~navi~modeの下での，既定の辿り順序
（一連の~linkを巡回するなど
— 例： `tabindex$a `HTML$r を見よ）。
◎
in the default traversal order of sequential navigation modes (such as cycling through links, see e.g. tabindex [HTML]),＼
</li>
	<li>
内容が非~CSS~UA内で表現されるとき。
◎
and when content is represented in non-CSS UAs.
</li>
</ul>

<p>
`~flex駒$の順序付けは、
`order$p ~propを利用して変更でき，
代わりに `order$p により`改変された文書~順序$でそれらを~lay-outする
— 視覚的な二次元~canvas上での駒の空間的な配列法を［
発話や連列的~naviなどの一次元な呈示における論理-順序
］から違えるために。
`CSS-DISPLAY-3$r
<a href="~CSSDISP#order-property">§ 表示-順序： `order^p ~prop</a>
を見よ。
◎
The order property can be used to change flex items’ ordering, laying them out in order-modified document order instead, in order to make their spatial arrangement on the 2D visual canvas differ from their logical order in linear presentations such as speech and sequential navigation. See CSS Display 3 § 3 Display Order: the order property. [CSS-DISPLAY-3]
</p>

<p class="note">注記：
視覚的な~~認識は二次元であり, 一次元ではないので、
欲される~boxの順序は，［
視覚的でない媒体や非~CSS~UAに利用される論理-順序
］と常に一致するとは限らない。
◎
Note: Since visual perception is two-dimensional and non-linear, the desired box order is not always the same logical order used by non-visual media and non-CSS UAs.
</p>

<p class="advisement"><strong>
作者は、［
論理的でない，もっぱら視覚的な内容の並替ng
］に限って， `order$p を利用し`なければナラナイ^em。
論理的に並替えるために `order$p を利用する~stylesheetは、
適合でない。
◎
Authors must use order only for visual, not logical, reordering of content. Style sheets that use order to perform logical reordering are non-conforming.
</strong></p>

<div class="example">
<p>
多くの~web~pageは、
類似な形状に~markupされている
— 上端に~header, 下端に~footerがあって，
中段に内容~区画と 1 本か 2 本の追加的な~colがある様なものなど。
一般に，~~主要な内容は、
追加的な~colより前, ~pageの~source~codeの最初に来ることが望ましい。
しかしながら，これを得ることは、
共通的な多くの設計
— 追加的な~colが左に, 内容~区画が右に~~位置するような単純なものも含む —
においては，困難である。
これは，年月に渡り 様々な仕方で取組まれており、
追加的な~colが 2 本~在るものは，
しばしば “`Holy Grail Layout^en” （ “聖なる~layout” ）と称されている。
`order$p は これを自明にする。
例えば次の様な，~pageの~code, 欲される~layoutがあるとする：
◎
Many web pages have a similar shape in the markup, with a header on top, a footer on bottom, and then a content area and one or two additional columns in the middle. Generally, it’s desirable that the content come first in the page’s source code, before the additional columns. However, this makes many common designs, such as simply having the additional columns on the left and the content area on the right, difficult to achieve. This has been addressed in many ways over the years, often going by the name "Holy Grail Layout" when there are two additional columns. order makes this trivial. For example, take the following sketch of a page’s code and desired layout:
</p>

<div class="code-and-figure">
<div><pre class="lang-html">&lt;!DOCTYPE html&gt;
&lt;header&gt;...&lt;/header&gt;
&lt;main&gt;
   &lt;article&gt;...&lt;/article&gt;
   &lt;nav&gt;...&lt;/nav&gt;
   &lt;aside&gt;...&lt;/aside&gt;
&lt;/main&gt;
&lt;footer&gt;...&lt;/footer&gt;
</pre></div>

<div>`flex-order-page^dgm</div>
</div>

<p>
この~layoutは，~flex~layoutにより容易に達成される：
◎
This layout can be easily achieved with flex layout:
</p>

<pre class="lang-css">
main { `display:flex$p; }
main &gt; article { `order:2$p; `min-width:12em$p; `flex:1$p; }
main &gt; nav     { `order:1$p; `width:200px$p; }
main &gt; aside   { `order:3$p; `width:200px$p; }
</pre>


<p>
追加される特典として、
~colたちは，
既定で`縦幅が等しく揃えられる＠#valdef-align-items-stretch$ようになり、
~~主要な内容は，~screenを埋めるために必要yな幅になる。
加えて，媒体~queryと組合せることで、［
~screen幅が狭いときは，すべてを縦方向に~layoutする
］よう切替えることも可能になる：
◎
As an added bonus, the columns will all be equal-height by default, and the main content will be as wide as necessary to fill the screen. Additionally, this can then be combined with media queries to switch to an all-vertical layout on narrow screens:
</p>

<pre class="lang-css">
@media all and (`max-width:600px$p) {
  /* <span class="comment">
3 本の~colには狭過ぎるときの~support
◎
Too narrow to support three columns
</span> */
  main { `flex-flow:column$p; }
  main &gt; article, main &gt; nav, main &gt; aside {
  /* <span class="comment">
文書~順序に戻す
◎
   Return them to document order
</span> */
    `order:0$p; `width:auto$p;
  }
}
</pre>

<p><small>
（`複-行f$な~flex容器を利用して，もっと気の利いた折返ngを達成する方法は、
読者への宿題として残しておく。）
</small>
◎
(Further use of multi-line flex containers to achieve even more intelligent wrapping left as an exercise for the reader.)
</p>
</div>

		</section>
	</section>
	<section id="flex-lines">
<h2 title="Flex Lines">6. ~flex行l</h2>

<p>
`~flex容器$内の`~flex駒$たちは、
`~flex行l@
（ `flex line^en）
— 略して，行f† —
たちの中へ，~lay-outされ, 整列される
— 各~行fは、
~layout~algoにおいて，~group分けと整列に利用される仮の容器を成す。
【†~textの “行l” （`~flow~layout$の行l~box）と混同されないよう，この訳では "°" を付与して記す。】
◎
Flex items in a flex container are laid out and aligned within flex lines, hypothetical containers used for grouping and alignment by the layout algorithm.＼
</p>

<p>
`~flex容器$は、
`flex-wrap$p ~propに依存して，`単-行f$にも`複-行f$にもなり得る：
◎
A flex container can be either single-line or multi-line, depending on the flex-wrap property:
</p>

<ul>
	<li>
`単-行f@
な`~flex容器$（すなわち， `flex-wrap:nowrap$p ）は、
そのすべての子を
— それらの内容が~overflowするかどうかに関わらず —
単独の行f内に~lay-outする。
◎
A single-line flex container (i.e. one with flex-wrap: nowrap) lays out all of its children in a single line, even if that would cause its contents to overflow.
</li>
	<li>
`複-行f@
な`~flex容器$
（すなわち，
`flex-wrap:wrap$p ／ `flex-wrap:wrap-reverse$p
）は、
`~flex駒$たちを，既存の行fに収めるには幅が広過ぎるときには
— ~textが改行で折返されるのと類似に —
複数の行fに分断する。
【 1 本の行fに収まるときでも、その挙動は単-行fと異なる。】
そのように作成された追加的な行fたちは、
`flex-wrap$p ~propに則って，~flex容器の中で`交叉-軸$沿いに堆積されていく。
~flex容器~自身が完全に空でない限り、
どの行fも 1 個以上の`~flex駒$を包含する。
【完全に空ならば、行fは まったく作成されない…と見なしてよさそうだが、はっきりしない。】
◎
A multi-line flex container (i.e. one with flex-wrap: wrap or flex-wrap: wrap-reverse) breaks its flex items across multiple lines, similar to how text is broken onto a new line when it gets too wide to fit on the existing line. When additional lines are created, they are stacked in the flex container along the cross axis according to the flex-wrap property. Every line contains at least one flex item, unless the flex container itself is completely empty.
</li>
</ul>

<div class="example">
<p>
次の例に，横方向に収まり切らず 複数~行fに折返される，
4 個のボタンを示す：
◎
This example shows four buttons that do not fit side-by-side horizontally, and therefore will wrap into multiple lines.
</p>

<pre class="lang-css">
#flex {
  `display:flex$p;
  `flex-flow:row wrap$p;
  `width:300px$p;
}
.item {
  `width:80px$p;
}
</pre>

<pre class="lang-html">
&lt;div id="flex"&gt;
  &lt;div class="item"&gt;1&lt;/div&gt;
  &lt;div class="item"&gt;2&lt;/div&gt;
  &lt;div class="item"&gt;3&lt;/div&gt;
  &lt;div class="item"&gt;4&lt;/div&gt;
&lt;/div&gt;
</pre>

<p>
容器は 300px 幅なので、
単独の行fには 3 個までの駒しか収まらない。
それらは 240px を占め，残りの空間に 60px が残される。
`flex-flow$p ~propの値には，［
`複-行f$な~flex容器を指定する `wrap$v ~keyword
］が現れているので、
~flex容器は，最後の駒を包含するための追加的な行fを作成することになる。
◎
Since the container is 300px wide, only three of the items fit onto a single line. They take up 240px, with 60px left over of remaining space. Because the flex-flow property specifies a multi-line flex container (due to the wrap keyword appearing in its value), the flex container will create an additional line to contain the last item.
</p>

<figure>`multiline-no-flex^dgm
<figcaption>
複-行f ~flex容器の描画~例
◎
An example rendering of the multi-line flex container.
</figcaption></figure>

	</div>

<p>
内容が行fたちに分断されたなら，各~行fは独立に~lay-outされる。
~flex可能な長さ, および［
`justify-content$p, `align-self$p
］~propは、
行fごとに，その駒たちに対し~~適用される。
◎
Once content is broken into lines, each line is laid out independently; flexible lengths and the justify-content and align-self properties only consider the items on a single line at a time.
</p>

<p>
`複-行f$な~flex容器においては（行fが 1 本だけであっても）、
各~行fの`交叉size$は，その行f上の`~flex駒$たちを（ `align-self$p による整列の後で）包含するために必要yな最小な~sizeになり、
行fたちは， `align-content$p ~propにより ~flex容器~内で整列される。
`単-行f$な~flex容器においては、
その行fの`交叉size$は ~flex容器の`交叉size$になり，
`align-content$p の効果はない。
行fの`主size$は、
~flex容器の`内容~box$の`主size$と常に同じになる。
◎
In a multi-line flex container (even one with only a single line), the cross size of each line is the minimum size necessary to contain the flex items on the line (after alignment due to align-self), and the lines are aligned within the flex container with the align-content property. In a single-line flex container, the cross size of the line is the cross size of the flex container, and align-content has no effect. The main size of a line is always the same as the main size of the flex container’s content box.
</p>

<div class="example">
<p>
すべての~flex駒に `flex:auto$p が与えられていることを除いて，前と同じにされている例を次に示す。
最初の行fには残りの空間が 60px あり,
そのすべての駒に同じ~flex能が備わるので、
行f上の 3 個の駒それぞれは，余った横幅から 20px ずつ受取る結果, 100px 幅になる。
残る 1 個の駒はそれのみで行fを占め，
その行fの横幅~全体, すなわち 300px まで伸張されることになる。
◎
Here’s the same example as the previous, except that the flex items have all been given flex: auto. The first line has 60px of remaining space, and all of the items have the same flexibility, so each of the three items on that line will receive 20px of extra width, each ending up 100px wide. The remaining item is on a line of its own and will stretch to the entire width of the line, i.e. 300px.
</p>

<figure>`multiline-flex^dgm
<figcaption>
すべての駒に `flex:auto$p が与えられていることを除いて，上と同じときの描画
◎
A rendering of the same as above, but with the items all given flex: auto.
</figcaption></figure>
	</div>

	</section>
	<section id="flexibility">
<h2 title="Flexibility">7. ~flex能</h2>

<p>
~flex~layoutには、
各`~flex駒$を “~flex” にして、
`主-次元$において`可用な空間$を埋めるために，それらの［
横幅／縦幅
］を改めることを可能にする能を定義する側面がある。
これは、
`flex$p ~propを通して行われる。
~flex容器は、
自身を埋めるよう，その駒たちに自由空間を
（`~flex伸長-係数$に比例する分だけ）
分配するか、
自身を~overflowしないよう，駒たちを
（各~駒の`~flex縮短-係数$に比例する分だけ）
縮短する。
◎
The defining aspect of flex layout is the ability to make the flex items “flex”, altering their width/height to fill the available space in the main dimension. This is done with the flex property. A flex container distributes free space to its items (proportional to their flex grow factor) to fill the container, or shrinks them (proportional to their flex shrink factor) to prevent overflow.
</p>

<p>
`~flex駒$は、［
`flex-grow$p, `flex-shrink$p
］いずれの値も 0 ならば
`全部的に~flex不能@
とされ，そうでないならば
`~flex可能@
とされる。
◎
A flex item is fully inflexible if both its flex-grow and flex-shrink values are zero, and flexible otherwise.
</p>

		<section id="flex-property">
<h3 title="The flex Shorthand">7.1. `flex^p 略式~prop</h3>

◎名 `flex@p
◎値 
`none$v | [
`flex-grow$tp
`flex-shrink$tp? ||
`flex-basis$tp
]
◎初 `0 1 auto^v
◎適 `~flex駒$
◎継 されない
◎百 個々の~propを見よ
◎算 個々の~propを見よ
◎順 文法に従う
◎ア 算出d値の型による
◎表終

<div class="p">
<p>
`flex$p ~propは、
次の成分からなる，~flex可能な~size【！~flex可能な長さ】を指定する：
</p>
<ul>
	<li>
`~flex伸長-係数$,
`~flex縮短-係数$
— これらは、
`~flex係数@
と総称される。
</li>
	<li>
`~flex基底s$
</li>
</ul>

<p>
~boxが`~flex駒$である場合、
その`主size$を決定するとき，
`主size~prop$の`代わりに^em `flex$p が諮られる。
~boxが`~flex駒$でない場合、
`flex$p の効果はない。
</p>

◎
The flex property specifies the components of a flexible size: the flex factors (grow and shrink) and the flex basis. When a box is a flex item, flex is consulted instead of the main size property to determine the main size of the box. If a box is not a flex item, flex has no effect.
</div>

<p class="note">注記：
`flex$p の各~下位propの初期~値は、
`flex:0 1 auto＠#flex-initial$p と等価になる。
これは、
`flex$p 略式~prop内で対応する各~成分が省略されたときの既定（実質的に `1 1 0px^v ）から相違する
【構文から，全部~省略することはできないが】。
そうなっているのは、
`flex$p 略式~propが`最も共通的な事例＠#flex-common$を より良く収容するためである。
◎
Note: The initial values of the flex longhands are equivalent to flex: 0 1 auto. This differs from their defaults when omitted in the flex shorthand (effectively 1 1 0px) so that the flex shorthand can better accommodate the most common cases.
</p>

<dl>
	<dt class="value production" id="valdef-flex-grow">`flex-grow$tp</dt>
	<dd>
この `number [0,∞]$t 成分は、
`flex-grow$p `下位prop＠#flex-components$を設定して，
`~flex伸長-係数@
を指定する。
それは、
~flex容器の中で正な自由空間が分配される際に，
各`~flex駒$が他の`~flex駒$に比して どれだけ伸長することになるかを決定する。
省略されたときは、
`1^v に設定される。
◎
This &lt;number [0,∞]&gt; component sets flex-grow longhand and specifies the flex grow factor, which determines how much the flex item will grow relative to the rest of the flex items in the flex container when positive free space is distributed. When omitted, it is set to 1.
</dd>
	<dd>
<details class="note">
<summary>
0 〜 1 の合間の~flex値には、
ある特別な挙動がある：
同じ行f上にある駒たちの~flex値の総和が 1 に満たない場合、
それらが占める自由空間は 100% に満たなくなる。
◎
Flex values between 0 and 1 have a somewhat special behavior: when the sum of the flex values on the line is less than 1, they will take up less than 100% of the free space.
</summary>

<p>
駒の `flex-grow$p 値は、
実質的に自由空間の比例分を要請する
— 値 `1^v は “自由空間 の 100%” を意味する。
ある行f上の駒たちが要請している自由空間が合計で 100% を超える場合、
互いの比を保ちながら正確に 100% を利用し尽くすよう，振り分け直される
— 一方で 100% を下回る場合
（それぞれが `flex-grow$p:.25 にされた 3 個の駒がある場合など）、
各~駒は正確に要請した分だけ取得する
（各~駒は自由空間の 25% を取得し，残る 25% は埋められない）。
自由空間がどう分配されるかの正確な詳細は、
`§ ~flex可能な長さの解決-法＠#resolve-flexible-lengths$
を見よ。
◎
An item’s flex-grow value is effectively a request for some proportion of the free space, with 1 meaning “100% of the free space”; then if the items on the line are requesting more than 100% in total, the requests are rebalanced to keep the same ratio but use up exactly 100% of it. However, if the items request less than the full amount (such as three items that are each flex-grow: .25) then they’ll each get exactly what they request (25% of the free space to each, with the final 25% left unfilled). See § 9.7 Resolving Flexible Lengths for the exact details of how free space is distributed.
</p>

<p>
この~patternは、
`flex-grow$p が 0 に近づくときの挙動を連続的にするために要求される
（すなわち、駒は自由空間をまったく占めないことが求まれる）。
さもなければ、駒は `flex-grow$p が `0^v にどこまで近づこうが
— `1^v のときと同じく —
自由空間すべてを占め， 0 に十分~近くなった所で，いきなり，まったく占めなくなる。
この挙動があれば、
`flex-grow$p が `1^v から下へ縮短するに伴い［
駒が占める自由空間は、
次第に減り， 0 の所で無くなる
］よう，滑らかに遷移することになる。
◎
This pattern is required for continuous behavior as flex-grow approaches zero (which means the item wants none of the free space). Without this, a flex-grow: 1 item would take all of the free space; but so would a flex-grow: 0.1 item, and a flex-grow: 0.01 item, etc., until finally the value is small enough to underflow to zero and the item suddenly takes up none of the free space. With this behavior, the item instead gradually takes less of the free space as flex-grow shrinks below 1, smoothly transitioning to taking none of the free space at zero.
</p>

<p>
作者は、
この “部分的に埋める” 挙動が`特定的に^em欲されない限り，
1 以上の値を貫き続けるべきである。
例えば `1^v, `2^v を利用する方が `.33^v, `.67^v を利用するより，通例的に良い
— その方が、
駒が追加-／除去されたり, 行fが折返されたときにも，
意図される挙動が保たれると見込まれるので。
◎
Unless this “partial fill” behavior is specifically what’s desired, authors should stick to values ≥ 1; for example, using 1 and 2 is usually better than using .33 and .67, as they’re more likely to behave as intended if items are added, removed, or line-wrapped.
</p>
</details>
	</dd>

	<dt class="value production" id="valdef-flex-shrink">`flex-shrink$tp</dt>
	<dd>
この `number [0,∞]$t 成分は、
`flex-shrink$p `下位prop＠#flex-components$を設定して，
`~flex縮短-係数@
を指定する。
それは、
~flex容器の中で負な自由空間が分配される際に，［
`~flex駒$が他の`~flex駒$に比して どれだけ縮短することになるか
］を決定する。
省略されたときは、
`1^v に設定される。
負な自由空間を分配する際には、
`~flex縮短-係数$は，`~flex基底s$で乗算される。
◎
This &lt;number [0,∞]&gt; component sets flex-shrink longhand and specifies the flex shrink factor, which determines how much the flex item will shrink relative to the rest of the flex items in the flex container when negative free space is distributed. When omitted, it is set to 1.
</dd>
	<dd class="note">注記：
負な空間を分配する際には、
`~flex縮短-係数$は，`~flex基底~size$で乗算されることに注意。
これにより、
負な空間は，駒が縮短できる量に比例するよう分配され、
例えば，大きい駒が~~相当に縮短されない限り，小さい駒が 0 まで縮短されないようにする。
◎
Note: The flex shrink factor is multiplied by the flex base size when distributing negative space. This distributes negative space in proportion to how much the item is able to shrink, so that e.g. a small item won’t shrink to zero before a larger item has been noticeably reduced.
</dd>

	<dt class="value production" id="valdef-flex-basis">`flex-basis$tp</dt>
	<dd>
この成分は、
`flex-basis$p `下位prop＠#flex-components$を設定して，
`~flex基底s@
を指定する。
それは、
各~駒の~flex係数に則って自由空間が分配される前の，`~flex駒$の初期`主size$を与える。
◎
This component sets the flex-basis longhand, which specifies the flex basis: the initial main size of the flex item, before free space is distributed according to the flex factors.
</dd>
	<dd>
<p>
この成分は、［
`width$p, `height$p
］~propと同じ値を受容する（ただし， `~autoB$v の扱いは異なる）ことに加えて，
~keyword `content$v も受容する：
◎
&lt;'flex-basis'&gt; accepts the same values as the width and height properties (except that auto is treated differently) plus the content keyword:
</p>

		<dl>
			<dt>`~autoB@v</dt>
			<dd>
~flex駒にこの~keywordが指定された場合、
`flex-basis$p の使用~値は，`主size~prop$の値から~~取得される。
その値も `~autoS$v である場合の使用~値は， `content$v になる。
◎
When specified on a flex item, the auto keyword retrieves the value of the main size property as the used flex-basis. If that value is itself auto, then the used value is content.
</dd>

			<dt>`content@v</dt>
			<dd>
`~flex駒$の内容に基づく`自動的~size$を指示する（概して，`最大-内容~size$に等価になるが、［
`選好d縦横比$, 内在的~sizing拘束, 直交~flow
］を取扱うための調整も伴う
— `詳細＠#algo-main-item$は `§ ~flex~layout~algo$ を見よ）。
◎
Indicates an automatic size based on the flex item’s content. (This is typically equivalent to the max-content size, but with adjustments to handle preferred aspect ratios, intrinsic sizing constraints, and orthogonal flows; see details in § 9 Flex Layout Algorithm.)
</dd>
			<dd class="note">注記：
この値は、
この仕様の初期~releaseには無かったものであり，
一部の古い実装では~supportされない。
等価な効果は、
`主size~prop$ に `~autoS$v をあてがった上で，
`auto^v を利用して得られる。
◎
Note: This value was not present in the initial release of Flexible Box Layout, and thus some older implementations will not support it. The equivalent effect can be achieved by using auto together with a main size (width or height) of auto.
</dd>

			<dt>`width$tp</dt>
			<dd>
他のすべての値に対しては、［
`width$p, `height$p
］に対するときと同じ仕方で解決される。
◎
For all other values, flex-basis is resolved the same way as for width and height.
</dd>
		</dl>
	</dd>
	<dd>
`flex$p 略式~propから省略された場合の`指定d値$は、
`0^v になる。
◎
When omitted from the flex shorthand, its specified value is 0.
</dd>

	<dt>`none@v</dt>
	<dd>
~keyword `none$v は，`0 0 auto^v に展開される。
◎
The keyword none expands to 0 0 auto.
</dd>
</dl>

<hr />

<figure>

	<figure><figcaption>
すべての空間が分配される（ `flex-basis:0$p ）：
◎
All Space Distributed (flex-basis:0)
</figcaption>
`rel-vs-abs-flex-a^dgm
</figure>

	<figure><figcaption>
余った空間が分配される（ `flex-basis:auto$p ）：
◎
Extra Space Distributed (flex-basis:auto)
</figcaption>
`rel-vs-abs-flex-b^dgm
</figure>

<figcaption>
（基底s 0 による） “絶対的” ~flexと,
（ 駒の内容~sizeから得られる基底sによる） “相対的” ~flex
との間の相違を示す図式。
3 個の駒の~flex係数は、
順に `1^v, `1^v, `2^v にされているとする。
~flex係数 `2^v を伴う駒が他の二倍 伸長することに注目。
【前者の“絶対的” ~flexでは、各~駒が，いったん幅 0 の~~状態にされるので，可用な幅~全部が自由空間にあてがわれた上で、それが~flex係数に応じた比率で各~駒に分配される。】
【！（内容~sizeが分配された幅を超える駒については、内容がはみ出すことになる）】
◎
A diagram showing the difference between "absolute" flex (starting from a basis of zero) and "relative" flex (starting from a basis of the item’s content size). The three items have flex factors of 1, 1, and 2, respectively: notice that the item with a flex factor of 2 grows twice as fast as the others.
</figcaption></figure>

<p>
［
2 個の~flex係数
］が前置されていない，単位なしの 0 は、
~flex係数として解釈されるモノトスル。
誤解釈や無効な宣言を避けるため、
作者は，単位を伴う 0 `flex-basis$tp 成分を指定するか, あるいは
その前に 2 個の~flex係数を置かなければナラナイ。
◎
A unitless zero that is not already preceded by two flex factors must be interpreted as a flex factor. To avoid misinterpretation or invalid declarations, authors must specify a zero &lt;'flex-basis'&gt; component with a unit or precede it by two flex factors.
</p>

			<section id="flex-common">
<h3 title="Basic Values of flex">7.1.1. 基本的な `flex^p 値</h3>

◎非規範的

<p>
以下に、
最も共通的に欲される効果を表現する，
4 種の `flex$p 値による効果を要約する：
◎
The list below summarizes the effects of the four flex values that represent most commonly-desired effects:
</p>

<dl>
	<dt id="flex-initial">`flex:initial$p</dt>
	<dd>
`flex:0 1 auto$p に等価（これが初期~値）。
駒を，その［
`width$p ／ `height$p
］~propに基づいて~sizeする。
（駒の`主size~prop$が `~autoS$v に算出される場合、
これは，その駒をその内容に基づいて~sizeすることになる。）
正な自由空間があるときは，~flex駒を~flex不能にする一方で、
空間が足りないときは，その最小~sizeへの縮短-を許容する。
`整列~能＠#alignment$や `~auto_v~margin$を利用すれば、
~flex駒たちを`主-軸$沿いに整列させられる。
◎
Equivalent to flex: 0 1 auto. (This is the initial value.) Sizes the item based on the width/height properties. (If the item’s main size property computes to auto, this will size the flex item based on its contents.) Makes the flex item inflexible when there is positive free space, but allows it to shrink to its minimum size when there is insufficient space. The alignment abilities or auto margins can be used to align flex items along the main axis.
</dd>

	<dt>`flex:auto$p</dt>
	<dd>
`flex:1 1 auto$p に等価。
駒を，その［
`width$p ／ `height$p
］~propに基づいて駒を~sizeしつつ、
`主-軸$沿いの自由空間を吸収させるために，
それらを全部的に~flex可能にする。
どの駒も， `flex$p が［
`auto^v, `initial^v, `none^v
］のいずれかである場合、
それらの駒が~sizeされた後の正な自由空間は，
`flex:auto$p を伴う駒に均等に分配されることになる。
◎
Equivalent to flex: 1 1 auto. Sizes the item based on the width/height properties, but makes them fully flexible, so that they absorb any free space along the main axis. If all items are either flex: auto, flex: initial, or flex: none, any positive free space after the items have been sized will be distributed evenly to the items with flex: auto.
</dd>

	<dt>`flex:none$p</dt>
	<dd>
`flex:0 0 auto$p に等価。
この値は、［
`width$p ／ `height$p
］~propに則って駒を~sizeしつつ，
~flex駒を`全部的に~flex不能$にする。
これは、［
~overflowが生じる状況~下でも，~flex駒たちに対する縮短-は許容されない
］ことを除いて，
`initial$v と類似する。
◎
Equivalent to flex: 0 0 auto. This value sizes the item according to the width/height properties, but makes the flex item fully inflexible. This is similar to initial, except that flex items are not allowed to shrink, even in overflow situations.
</dd>

	<dt><code class="css">`flex$p: `number [1,∞]$t</code></dt>
	<dd>
<code class="css">flex: `number [1,∞]$t `1 0^v</code>
に等価。
~flex駒を~flex可能にして，`~flex基底s$を 0 に設定する。
その結果、
駒は，指定された比例分による［
~flex容器の中の自由空間
］を受取る。
~flex容器の中のすべての駒が この~patternを利用している下での，それらの~sizeは、
~flex係数に指定された値に比例するようになる。
◎
Equivalent to flex: &lt;number [1,∞]&gt; 1 0. Makes the flex item flexible and sets the flex basis to zero, resulting in an item that receives the specified proportion of the free space in the flex container. If all items in the flex container use this pattern, their sizes will be proportional to the specified flex factor.
</dd>
</dl>

<p>
既定では、
~flex駒がその内容の最小~size（単語や~sizeが固定された要素の最~大な長さ）を下回るまで縮短することはない。
このふるまいを変えるには、［
`min-width$p ／ `min-height$p
］~propを設定する
（ `§ ~flex駒の自動的な最小~size＠#min-size-auto$ を見よ）。
◎
By default, flex items won’t shrink below their minimum content size (the length of the longest word or fixed-size element). To change this, set the min-width or min-height property. (See § 4.5 Automatic Minimum Size of Flex Items.)
</p>

			</section>
		</section>
		<section id="flex-components">
<h3 title="Components of Flexibility">7.2. ~flex能の各~成分</h3>

<p>
~flex能の個々の成分は，下位propにより独立に制御できる。
◎
Individual components of flexibility can be controlled by independent longhand properties.
</p>

<p class="advisement"><strong>
作者には、
~flex能を制御するときは，
`flex$p 略式~propを利用することが奨励される
— その各種~下位propを直に利用するのでなく。
この略式~propは、
`共通的な用途$を収容するよう，未指定な成分を正しく設定し直すので。
</strong>
◎
Authors are encouraged to control flexibility using the flex shorthand rather than with its longhand properties directly, as the shorthand correctly resets any unspecified components to accommodate common uses.
</p>

			<section id="flex-grow-property">
<h4 title="The flex-grow property">7.2.1. `flex-grow^p ~prop</h4>

◎名 `flex-grow@p
◎値 `number [0,∞]$t
◎初 `0^v
◎適 `~flex駒$
◎継 されない
◎百 受容しない
◎算 指定された実数
◎順 文法に従う
◎ア 算出d値の型による
◎表終

<p class="advisement"><strong>
作者には、
~flex能を制御するときは
— `flex-grow$p を直に利用するのでなく —
`flex$p 略式~propを利用することが奨励される。
この略式~propは、
`共通的な用途$を収容するよう，未指定な成分を正しく設定し直すので。
</strong>
◎
Authors are encouraged to control flexibility using the flex shorthand rather than with flex-grow directly, as the shorthand correctly resets any unspecified components to accommodate common uses.
</p>

<dl>
	<dt id="valdef-flex-grow-number">`number$t</dt>
	<dd>
`flex-grow$p ~propは、
`~flex伸長-係数$を供された `number^t に設定する。
負な数は許容されない。
◎
The flex-grow property sets the flex grow factor to the provided &lt;number&gt;. Negative values are not allowed.
</dd>
</dl>

			</section>
			<section id="flex-shrink-property">
<h4 title="The flex-shrink property">7.2.2. `flex-shrink^p ~prop</h4>

◎名 `flex-shrink@p
◎値 `number [0,∞]$t
◎初 `1^v
◎適 `~flex駒$
◎継 されない
◎百 受容しない
◎算 指定された実数
◎順 文法に従う
◎ア 算出d値の型による
◎表終

<p class="advisement"><strong>
作者には、
~flex能を制御するときは
— `flex-shrink$p を直に利用するのでなく —
`flex$p 略式~propを利用することが奨励される。
この略式~propは、
`共通的な用途$を収容するよう，未指定な成分を正しく設定し直すので。
</strong>
◎
Authors are encouraged to control flexibility using the flex shorthand rather than with flex-shrink directly, as the shorthand correctly resets any unspecified components to accommodate common uses.
</p>

<dl>
	<dt id="valdef-flex-shrink-number">`number$t</dt>
	<dd>
`flex-shrink$p ~propは、
`~flex縮短-係数$を 供された `number^t に設定する。
負な数は許容されない。
◎
The flex-shrink property sets the flex shrink factor to the provided &lt;number&gt;. Negative values are not allowed.
</dd>
</dl>

			</section>
			<section id="flex-basis-property">
<h4 title="The flex-basis property">7.2.3. `flex-basis^p ~prop</h4>

◎名 `flex-basis@p
◎値 `content$v | `width$tp
◎初 `~autoB$v
◎適 `~flex駒$
◎継 されない
◎百
`~flex容器$の`内縁$sz `主size$に相対的
◎
relative to the flex container’s inner main size
◎算 
指定された~keyword／算出された `length-percentage$t 値
◎
specified keyword or a computed &lt;length-percentage&gt; value
◎順 文法に従う
◎ア 算出d値の型による
◎表終

<p class="advisement"><strong>
作者には、
~flex能を制御するときは
— `flex-basis$p を直に利用するのでなく —
`flex$p 略式~propを利用することが奨励される。
この略式~propは、
`共通的な用途$を収容するよう，未指定な成分を正しく設定し直すので。
</strong>
◎
Authors are encouraged to control flexibility using the flex shorthand rather than with flex-basis directly, as the shorthand correctly resets any unspecified components to accommodate common uses.
</p>

<p>
`flex-basis$p ~propは、
`~flex基底s$を設定する。
それは、［
`width$p ／ `height$p
］~propが受容する値に加えて，
値 `content$v も受容する。
◎
The flex-basis property sets the flex basis. It accepts the same values as the width and height property, plus content.
</p>

<p>
上に定義された［
`~autoB$v, `content$v
］以外のすべての値に対しては、
`横組み$の下では，
`flex-basis$p は `width$p と同じ仕方で解決される `CSS2$r 。
ただし、
値が `width$p 用の `~autoS$v に解決される場合は，
代わりに `flex-basis$p 用の `content$v に解決される。
例えば、
`flex-basis$p に対する百分率~値は，
~flex駒の包含塊（すなわち，その~flex容器）を基準に解決され、［
包含塊の~sizeが`不定$である場合の `flex-basis$p の使用~値
］は `content$v になる。
別の~~帰結として、
`box-sizing$p など 他から指定されない限り，
`flex-basis$p は`内容~box$の~sizeを決定する。
◎
For all values other than auto and content (defined above), flex-basis is resolved the same way as width in horizontal writing modes [CSS2], except that if a value would resolve to auto for width, it instead resolves to content for flex-basis. For example, percentage values of flex-basis are resolved against the flex item’s containing block (i.e. its flex container); and if that containing block’s size is indefinite, the used value for flex-basis is content. As another corollary, flex-basis determines the size of the content box, unless otherwise specified such as by box-sizing [CSS3UI].
</p>

			</section>
		</section>
	</section>

	<section id="alignment">
<h2 title="Alignment">8. 整列</h2>

<p>
~flex容器の内容がそれらの~flex~~処理を終えて，
すべての~flex駒【の~flex~sizeを】について両~次元とも完結したなら、
それらは，~flex容器~内で整列できるようになる。
◎
After a flex container’s contents have finished their flexing and the dimensions of all flex items are finalized, they can then be aligned within the flex container.
</p>

<p>
`margin$p ~propを［
塊~layoutの下で~marginが行えるものに類似するが，より強力な方式
］で駒を整列するために利用できる。
`~flex駒$はまた、
`CSS-ALIGN-3$r による`整列~prop$も~~尊守する
— それは、［
`主-軸$, `交叉-軸$
］どちらにおいても，
~keywordに基づく駒たちを容易に整列することを許容する。
これらの~propは、［
`CSS2$r の下では非常に困難であった，縦横 両~方向の中央~寄せ
］など，共通的な型の整列を自明にする。
◎
The margin properties can be used to align items in a manner similar to, but more powerful than, what margins can do in block layout. Flex items also respect the alignment properties from CSS Box Alignment, which allow easy keyword-based alignment of items in both the main axis and cross axis. These properties make many common types of alignment trivial, including some things that were very difficult in CSS 2.1, like horizontal and vertical centering.
</p>

<p class="note">注記：
この節に~~現れる各種~整列~propは，
`CSS-ALIGN-3$r にて定義されているが、
仕様の策定を遅らせないため，この仕様では、
規範的な依存関係は作成せずに，
関連な部分の定義を ここに再現する。
これらの~propは、
`CSS-ALIGN-3$r が策定を終え, 他の~layout~mode用の効果を定義するまでは、~flex~layoutにのみ適用される。
加えて、
`CSS-ALIGN-3$r に定義される新たな値は，
~flex~layoutにも適用される
— 言い換えれば、
`CSS-ALIGN-3$r が完了した時点で，
ここに与える定義に取って代わることになる。
◎
Note: While the alignment properties are defined in CSS Box Alignment [CSS-ALIGN-3], Flexible Box Layout reproduces the definitions of the relevant ones here so as to not create a normative dependency that may slow down advancement of the spec. These properties apply only to flex layout until CSS Box Alignment Level 3 is finished and defines their effect for other layout modes. Additionally, any new values defined in the Box Alignment module will apply to Flexible Box Layout; in other words, the Box Alignment module, once completed, will supersede the definitions here.
</p>

		<section id="auto-margins">
<h3 title="Aligning with auto margins">8.1. `auto^v ~marginによる整列-法</h3>

<p>
`この節は参考である。^em
~marginが~flex駒にどのように影響するかについての規範的な定義は、
`§ ~flex~layout~algo$ にて与えられる。
◎
This section is non-normative. The normative definition of how margins affect flex items is in the Flex Layout Algorithm section.
</p>

<p>
~flex駒に対する自動（ `auto^en ）~marginの効果は、
塊~flowの下での自動~marginととてもよく似る：
◎
Auto margins on flex items have an effect very similar to auto margins in block flow:
</p>

<ul>
	<li>
~flex基底s, ~flex可能な長さの計算を行う間は，
自動~marginは `0^v に扱われる。
◎
During calculations of flex bases and flexible lengths, auto margins are treated as 0.
</li>
	<li>
`justify-content$p, `align-self$p
による整列に先立って，
正な自由空間は、
その次元に属する自動~marginに分配される。
◎
Prior to alignment via justify-content and align-self, any positive free space is distributed to auto margins in that dimension.
</li>
	<li>
~overflowする各~boxは、
それらの`終端$方向の［
自動~margin, ~overflow
］を無視する。
◎
Overflowing boxes ignore their auto margins and overflow in the end direction.
</li>
</ul>

<p class="note">注記：
自由空間が自動~marginに分配される場合、
各種 `整列~prop$による，その次元に対する効果はなくなる。
~flex~~処理の後に残される自由空間すべては、
~marginにより奪われることになるので。
◎
Note: If free space is distributed to auto margins, the alignment properties will have no effect in that dimension because the margins will have stolen all the free space left over after flexing.
</p>

<div class="example">
<p>
`auto^v ~marginの用途の一つに、［
~flex駒たちを，主-軸の中で別個な “~groupたち” に分離する
］ことが挙げられる。
これを利用して，共通的な~UI~pattern
— ［
左端に整列されるもの, 右端に整列されるもの
］に分けられた，いくつかの~actionからなる単独の~bar —
を再現する例を次に示す：
◎
One use of auto margins in the main axis is to separate flex items into distinct "groups". The following example shows how to use this to reproduce a common UI pattern - a single bar of actions with some aligned on the left and others aligned on the right.
</p>

<figure>

<figcaption>
下の~codeの描画~見本：
◎
Sample rendering of the code below.
</figcaption>
`auto-bar^dgm
</figure>

<pre class="lang-css">
nav &gt; ul {
  `display:flex$p;
}
nav &gt; ul &gt; #login {
  `margin-left:auto$p;
}
</pre>

<pre class="lang-html">
&lt;nav&gt;
  &lt;ul&gt;
&lt;li&gt;&lt;a href=/about&gt;About&lt;/a&gt;
&lt;li&gt;&lt;a href=/projects&gt;Projects&lt;/a&gt;
&lt;li&gt;&lt;a href=/interact&gt;Interact&lt;/a&gt;
&lt;li id="login"&gt;&lt;a href=/login&gt;Login&lt;/a&gt;
  &lt;/ul&gt;
&lt;/nav&gt;
</pre>
</div>

<div class="example">
<p>
~overflowが生じる状況~下で、
`~auto_v~margin$を利用した場合と,
`整列~prop＠#propdef-align-items$を利用した場合との間の，交叉-軸~沿いの整列の相違を下の図に示す：
◎
The figure below illustrates the difference in cross-axis alignment in overflow situations between using auto margins and using the alignment properties.
</p>

<figure>`cross-auto-figure^dgm
<figcaption>
図左の駒たちは，~marginにより中央に寄せられる一方、
図右のそれらは `align-self$p により中央に寄せられている。
この~col~flex容器が~pageの左~辺に配置される場合、
図左の［
~~長い駒も全部的に読み取れる~marginによる挙動
］の方が望ましいものになるであろう。
他の状況下では、
図右の［
“真の~~意味の” 中央~寄せの挙動
］の方が好ましいものになり得る。
◎
The items in the figure on the left are centered with margins, while those in the figure on the right are centered with align-self. If this column flex container was placed against the left edge of the page, the margin behavior would be more desirable, as the long item would be fully readable. In other circumstances, the true centering behavior might be better.
</figcaption></figure>
</div>

		</section>
		<section id="justify-content-property">
<h3 title="Axis Alignment: the justify-content property">8.2. 主-軸~沿いの整列： `justify-content^p ~prop</h3>
【！align.justify-content】

◎名 `justify-content@p
◎値
`flex-start$vJ |
`flex-end$vJ |
`center$vJ |
`space-between$vJ |
`space-around$vJ
◎初 `flex-start$vJ
◎適 `~flex容器$
◎継 されない
◎百 受容しない
◎算 指定された~keyword
◎順 文法に従う
◎ア 離散的
◎表終

<p>
`justify-content$p ~propは、
~flex容器の現在の行fの`主-軸$沿いに，`~flex駒$を整列する。
これは、［
~flex可能な長さ, および`~auto_v~margin$
］が解決された`後に^em行われる。
これは概して、
行f上の`~flex駒$すべてについて，それぞれが［
~flex不能, または
~flex可能であるが その最大~sizeに到達している
］ときの［
残されて余った自由空間
］の分配を補助する。
それはまた、［
行fを~overflowする駒
］の整列に対し，ある程度の制御を~~供する。
◎
The justify-content property aligns flex items along the main axis of the current line of the flex container. This is done after any flexible lengths and any auto margins have been resolved. Typically it helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.
</p>

<dl>
	<dt>`flex-start@vJ</dt>
	<dd>
`~flex駒$は行fの始端に寄せるよう収納される：
［
行f上の最初の`~flex駒$の`主-始端$ ~margin辺
］は，行fの`主-始端$辺に接合され、
後続な各`~flex駒$は，先行する駒に接合される。
◎
Flex items are packed toward the start of the line. The main-start margin edge of the first flex item on the line is placed flush with the main-start edge of the line, and each subsequent flex item is placed flush with the preceding item.
</dd>

	<dt>`flex-end@vJ</dt>
	<dd>
`~flex駒$は行fの終端に寄せるよう収納される：
［
行f上の最後の`~flex駒$の`主-始端$ ~margin辺
］は，行fの`主-終端$辺に接合され、
先行する各`~flex駒$は，後続な駒に接合される。
◎
Flex items are packed toward the end of the line. The main-end margin edge of the last flex item is placed flush with the main-end edge of the line, and each preceding flex item is placed flush with the subsequent item.
</dd>

	<dt>`center@vJ</dt>
	<dd>
`~flex駒$は行fの中央に寄せるよう収納される：
行f上の`~flex駒$たちは、
互いに接合された上で、［
行fの`主-始端$辺と行f上の最初の駒との間
］, および［
行fの`主-終端$辺と行f上の最後の駒との間
］の空間が等量になるよう，行fの中央に寄せるよう整列される。
（残された自由空間が負である場合、
`~flex駒$は両~方向に等しく~overflowすることになる。）
◎
Flex items are packed toward the center of the line. The flex items on the line are placed flush with each other and aligned in the center of the line, with equal amounts of space between the main-start edge of the line and the first item on the line and between the main-end edge of the line and the last item on the line. (If the leftover free-space is negative, the flex items will overflow equally in both directions.)
</dd>

	<dt>`space-between@vJ</dt>
	<dd>
`~flex駒$は行f内に均等に分布される：
残された自由空間が負である場合，あるいは
行f上に在る`~flex駒$ が 1 個だけの場合、
この値は， `safe flex-start^v へ~fall-backする†。
他の場合、
行f上の［
最初／最後
］の`~flex駒$の［
`主-始端$／`主-終端$
］~margin辺が，行fの［
`主-始端$／`主-終端$
］辺に接合され、
行f上の残りの`~flex駒$に対しては，［
隣接な 2 つの駒の間隔がすべて一致する
］よう，自由空間が分配される。
◎
Flex items are evenly distributed in the line. If the leftover free-space is negative or there is only a single flex item on the line, this value falls back to safe flex-start. Otherwise, the main-start margin edge of the first flex item on the line is placed flush with the main-start edge of the line, the main-end margin edge of the last flex item on the line is placed flush with the main-end edge of the line, and the remaining flex items on the line are distributed so that the spacing between any two adjacent items is the same.
</dd>
	<dd class="trans-note">【†
`safe$v は、
`CSS-ALIGN-3$r にて拡張された，この~prop用に定義される値。
】</dd>

	<dt>`space-around@vJ</dt>
	<dd>
`~flex駒$たちは、
両端には半分~sizeの空間を伴う様に，
行f内に均等に分布される：
残された自由空間が負であるか, または
行f上に在る`~flex駒$が 1 個だけの場合、
この値は， `safe center^v へ~fall-backする。
他の場合、
行f上の隣接な どの 2 つの`~flex駒$の間隔も同じ~sizeになり，
その半分~sizeが［
行f上の［
最初／最後
］の`~flex駒$と［
`~flex容器$辺
］との間隔
］に一致するよう，自由空間が分配される。
◎
Flex items are evenly distributed in the line, with half-size spaces on either end. If the leftover free-space is negative or there is only a single flex item on the line, this value falls back to safe center. Otherwise, the flex items on the line are distributed such that the spacing between any two adjacent flex items on the line is the same, and the spacing between the first/last flex items and the flex container edges is half the size of the spacing between flex items.
</dd>
</dl>

<figure>`flex-pack^dgm
<figcaption>
~flex容器に対する［
5 種の `justify-content$p ~keywordによる効果
］を 3 色に色分けされた駒で図示。
◎
An illustration of the five justify-content keywords and their effects on a flex container with three colored items.
</figcaption></figure>

		</section>
		<section id="align-items-property">
<h3 title="Cross-axis Alignment: the align-items and align-self properties">8.3. 交叉-軸~沿いの整列： `align-items^p と `align-self^p ~prop</h3>

◎名 `align-items@p
◎値
`flex-start$vA |
`flex-end$vA |
`center$vA |
`baseline$vA |
`stretch$vA
◎初 `stretch$vA
◎適 `~flex容器$
◎継 されない
◎百 受容しない
◎算 指定された~keyword
◎順 文法に従う
◎ア 離散的
◎表終

◎名 `align-self@p
◎値
`auto$vA |
`flex-start$vA |
`flex-end$vA |
`center$vA |
`baseline$vA |
`stretch$vA
◎初 `auto$vA
◎適 `~flex駒$
◎継 されない
◎百 受容しない
◎算 指定された~keyword
◎順 文法に従う
◎ア 離散的
◎表終

<p>
~flex容器の各~行fの中の`~flex駒$たちは、
方向が垂直にされることを除いて `justify-content$p と類似に，
行fの`交叉-軸$沿いに整列させることができる。
`align-items$p は、
匿名`~flex駒$も含め，
~flex容器のすべての`~flex駒$用の既定の整列を設定する。
`align-self$p は、
この既定の整列を，個々の`~flex駒$について上書きできるようにする。
（匿名~flex駒に対しては、
`align-self$p は［
それに結び付けられている~flex容器~上の `align-items$p
］の値に常に合致する。）
◎
Flex items can be aligned in the cross axis of the current line of the flex container, similar to justify-content but in the perpendicular direction. align-items sets the default alignment for all of the flex container’s items, including anonymous flex items. align-self allows this default alignment to be overridden for individual flex items. (For anonymous flex items, align-self always matches the value of align-items on their associated flex container.)
</p>

<p>
`~flex駒$の交叉-軸~marginが両側とも `auto^v である場合、
`align-self$p の効果はない。
◎
If either of the flex item’s cross-axis margins are auto, align-self has no effect.
</p>

<p>
各種~値の意味は：
◎
Values have the following meanings:
</p>

<dl>
	<dt>`auto@vA</dt>
	<dd>
`交叉-軸$の整列~制御を，親~box上の `align-items$p の値に委ねる。
（これが `align-self$p の初期~値。）
◎
Defers cross-axis alignment control to the value of align-items on the parent box. (This is the initial value of align-self.)
</dd>

	<dt>`flex-start@vA</dt>
	<dd>
`~flex駒$の`交叉-始端$ ~margin辺は，行fの`交叉-始端$辺に接合される。
◎
The cross-start margin edge of the flex item is placed flush with the cross-start edge of the line.
</dd>

	<dt>`flex-end@vA</dt>
	<dd>
`~flex駒$の`交叉-終端$ ~margin辺は，行fの`交叉-終端$辺に接合される。
◎
The cross-end margin edge of the flex item is placed flush with the cross-end edge of the line.
</dd>

	<dt>`center@vA</dt>
	<dd>
`~flex駒$の~margin~boxは，行f内の`交叉-軸$の中で中央に寄せられる。
（
~flex行lの`交叉size$が`~flex駒$のそれより小さい場合、
それは両~方向に等しく~overflowすることになる。
）
◎
The flex item’s margin box is centered in the cross axis within the line. (If the cross size of the flex line is less than that of the flex item, it will overflow equally in both directions.)
</dd>

	<dt>`baseline@vA</dt>
	<dd>
`~flex駒$は
`基底線~整列に関与-@
する — 
すなわち、
行f上の，関与しているすべての`~flex駒$は、
それらの基底線が互いに整列するよう, かつ それらのうち［［［
自身の［
基底線と［
`交叉-始端$ ~margin辺
］］の間の距離
］が最~大になる駒
］が，行fの`交叉-始端$ 辺に接合される
］よう，整列される。
［
整列する軸に基底線を有さない`~flex駒$
］の基底線は、
その~border~boxから`合成-$されるとする。
◎
The flex item participates in baseline alignment: all participating flex items on the line are aligned such that their baselines align, and the item with the largest distance between its baseline and its cross-start margin edge is placed flush against the cross-start edge of the line. If the item does not have a baseline in the necessary axis, then one is synthesized from the flex item’s border box.
</dd>

	<dt>`stretch@vA</dt>
	<dd>
`交叉size~prop$が `~autoS$v に算出され, かつ
交叉-軸~marginの両側とも非 `auto^v の場合、
`~flex駒$は
`伸張され@
る。
その場合の使用~値は，［
`min-height$p ／
`min-width$p ／
`max-height$p ／
`max-width$p
］により課される拘束の下で，［
その駒の~margin~boxの`交叉size$が，その行fと同じ~sizeにアリな限り近くなる
］ために必要yな長さになる。
◎
If the cross size property of the flex item computes to auto, and neither of the cross-axis margins are auto, the flex item is stretched. Its used value is the length necessary to make the cross size of the item’s margin box as close to the same size as the line as possible, while still respecting the constraints imposed by min-height/min-width/max-height/max-width.
</dd>
	<dd class="note">注記：
~flex容器の縦幅が拘束されている場合、
この値により，`~flex駒$の内容が駒を~overflowさせ得る。
◎
Note: If the flex container’s height is constrained this value may cause the contents of the flex item to overflow the item.
</dd>
	<dd>
`~flex駒$の`交叉-始端$~margin辺は，その行fの`交叉-始端$辺に接合される。
◎
The cross-start margin edge of the flex item is placed flush with the cross-start edge of the line.
</dd>
</dl>

<figure>`flex-align^dgm
<figcaption>
~flex容器に対する［
5 種の `align-items$p ~keyword
］による効果を 4 色に色分けされた駒で図示。
◎
An illustration of the five align-items keywords and their effects on a flex container with four colored items.
</figcaption></figure>

		</section>
		<section id="align-content-property">
<h3 title="Packing Flex Lines: the align-content property">8.4. ~flex行lたちの収納-法： `align-content^p ~prop</h3>

◎名 `align-content@p
◎値
`flex-start$vC |
`flex-end$vC |
`center$vC |
`space-between$vC |
`space-around$vC |
`stretch$vC
◎初 `stretch$vC
◎適 `複-行f$な`~flex容器$
◎継 されない
◎百 受容しない
◎算 指定された~keyword
◎順 文法に従う
◎ア 離散的
◎表終

<p>
`align-content$p ~propは、
`交叉-軸$に余った空間があるときに，
~flex容器を成す行fたちを~flex容器の中で整列する
— `justify-content$p が個々の駒を`主-軸$の中で整列するときと類似に。
この~propは、
`単-行f$な~flex容器に対しては，効果はないことに注意。
各種~値の意味は：
◎
The align-content property aligns a flex container’s lines within the flex container when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis. Note, this property has no effect on a single-line flex container. Values have the following meanings:
</p>

<dl>
	<dt>`flex-start@vC</dt>
	<dd>
行fたちは、
~flex容器の始端に寄せるよう収納される：
~flex容器の中の最初の行fの`交叉-始端$辺は，~flex容器の`交叉-始端$辺に接合され、
後続な各~行fは，先行する行fに接合される。
◎
Lines are packed toward the start of the flex container. The cross-start edge of the first line in the flex container is placed flush with the cross-start edge of the flex container, and each subsequent line is placed flush with the preceding line.
</dd>

	<dt>`flex-end@vC</dt>
	<dd>
行fたちは，~flex容器の終端に寄せるよう収納される：
~flex容器の中の最後の行fの`交叉-終端$辺は，~flex容器の`交叉-終端$辺に接合され、
後続な各~行fは，先行する行fに接合される。
◎
Lines are packed toward the end of the flex container. The cross-end edge of the last line is placed flush with the cross-end edge of the flex container, and each preceding line is placed flush with the subsequent line.
</dd>

	<dt>`center@vC</dt>
	<dd>
行fたちは，~flex容器の中央に寄せるよう収納される：
~flex容器の中の行fたちは、
互いに接合された上で，~flex容器の中央に整列される
— ［
~flex容器の`交叉-始端$内容~辺と ~flex容器の最初の行fとの合間
］および［
~flex容器の`交叉-終端$内容~辺と ~flex容器の最後の行fとの合間
］の空間が等量になるよう
（残された自由空間が負である場合、
行fたちは両~方向に等しく~overflowすることになる）。
◎
Lines are packed toward the center of the flex container. The lines in the flex container are placed flush with each other and aligned in the center of the flex container, with equal amounts of space between the cross-start content edge of the flex container and the first line in the flex container, and between the cross-end content edge of the flex container and the last line in the flex container. (If the leftover free-space is negative, the lines will overflow equally in both directions.)
</dd>

	<dt>`space-between@vC</dt>
	<dd>
行fたちは、
~flex容器の中で均等に分布される：
残された自由空間が負である場合, または
~flex容器~内の~flex行lが 1 本だけの場合、
この値は， `safe flex-start^v へ~fall-backする†。
他の場合、
~flex容器の中の［
最初／最後
］の行fの［
`交叉-始端$／`交叉-終端$
］辺が，~flex容器の［
`交叉-始端$／`交叉-終端$
］内容~辺に接合され、
~flex容器の中の残りの行fは［
隣接な どの 2 本の行fの間隔も同じになる
］よう，自由空間が分配される。
◎
Lines are evenly distributed in the flex container. If the leftover free-space is negative or there is only a single flex line in the flex container, this value falls back to safe flex-start. Otherwise, the cross-start edge of the first line in the flex container is placed flush with the cross-start content edge of the flex container, the cross-end edge of the last line in the flex container is placed flush with the cross-end content edge of the flex container, and the remaining lines in the flex container are distributed so that the spacing between any two adjacent lines is the same.
</dd>
	<dd class="trans-note">【†
`safe$v は、
`CSS-ALIGN-3$r にて拡張された，この~prop用に定義される値。
】</dd>

	<dt>`space-around@vC</dt>
	<dd>
`~flex駒$たちは、
両端には半分~sizeの空間を伴う様に，~flex容器の中で均等に分布される：
残された自由空間が負である場合、
この値は， `safe center^v へ~fall-backする。
他の場合、
~flex容器の中の行fたちは［
隣接な どの 2 本の行fの間隔も同じ~sizeになり，その半分~sizeが［［
最初／最後
］の行fと［
`~flex容器$辺
］との間隔
］になるよう，自由空間が分配される。
◎
Lines are evenly distributed in the flex container, with half-size spaces on either end. If the leftover free-space is negative this value falls back to safe center. Otherwise, the lines in the flex container are distributed such that the spacing between any two adjacent lines is the same, and the spacing between the first/last lines and the flex container edges is half the size of the spacing between flex lines.
</dd>

	<dt>`stretch@vC</dt>
	<dd>
行fたちは、
残りの空間を占めるよう伸張される：
残された自由空間が負である場合、
この値は， `safe flex-start^v へ~fall-backする。
他の場合、
自由空間は［
すべての行fの合間が等しくになる
］よう分割された上で，それらの`交叉size$を増大させる。
◎
Lines stretch to take up the remaining space. If the leftover free-space is negative, this value falls back to safe flex-start. Otherwise, the free-space is split equally between all of the lines, increasing their cross size.
</dd>
</dl>

<p class="note">注記：
`複-行f$な~flex容器のみが、
`交叉-軸$沿いに自由空間を有する
— 行fたちは、
その中で整列されることになる。
`単-行f$な~flex容器における唯一の行fは、
空間を埋めるために自動的に伸張されるので。
◎
Note: Only multi-line flex containers ever have free space in the cross-axis for lines to be aligned in, because in a single-line flex container the sole line automatically stretches to fill the space.
</p>

<figure>`align-content-example^dgm
<figcaption>
`複-行f$な~flex容器に対する［
各種 `align-content$p ~keywordによる効果
］の図示
◎
An illustration of the align-content keywords and their effects on a multi-line flex container.
</figcaption></figure>

		</section>
		<section id="flex-baselines">
<h3 title="Flex Container Baselines">8.5. ~flex容器の基底線</h3>

<p>
`~flex容器$自身
— 以下，単に %容器 と記す —
を`基底線~整列に関与-$させるためには
（例： %容器 が，外縁の`~flex容器$内の`~flex駒$であるとき）、
自身の内容を最も良く表現する基底線の位置を %容器 に提出させる必要がある。
この~~目的において，
%容器 の`基底線~集合$は、
（ `order$p による並替ngの後, かつ `flex-direction$p も織り込んだ上で，）
以下に従って決定される基底線 %整列~基底線 から`生成される$
— 以下 “／” は同順とする：
◎
In order for a flex container to itself participate in baseline alignment (e.g. when the flex container is itself a flex item in an outer flex container), it needs to submit the position of the baselines that will best represent its contents. To this end, the baselines of a flex container are determined as follows (after reordering with order, and taking flex-direction into account):
</p>

<dl class="def-list">
	<dt>
`主-軸 基底線~集合@
【主-軸に平行な基底線~集合】
◎
first/last main-axis baseline set
</dt>
	<dd>
<p>
%容器 の［
`行内-軸$と`主-軸$
］が合致する場合、
%容器 の［
最初／最後
］の`主-軸 基底線~集合$は，次に従って決定される：
◎
When the inline axis of the flex container matches its main axis, its baselines are determined as follows:
</p>

		<ol>
			<li>
<p>
%容器 内に ~AND↓ を満たす`~flex駒$は在るならば：
</p>
				<ul>
					<li>
<p>
最も［
`始端$／`終端$
］にある`~flex行l$に配置される
</p>

<p class="trans-note">【
“最も始端（終端）”
は、
おそらく~layout後の位置を意味する。
したがって，原文には記述がないが、
`flex-wrap$p により指定される堆積~方向も織り込まれることになるはず。
】</p>

					</li>
					<li>
`基底線~整列に関与-$する
</li>
				</ul>
<p>
そのような駒たちが共有する`整列~基底線$が %整列~基底線 を与える。
</p>

◎
If any of the flex items on the flex container’s startmost/endmost flex line participate in baseline alignment, the flex container’s first/last main-axis baseline set is generated from the shared alignment baseline of those flex items.
</li>
			<li>
<p>
他の場合， %容器 内に`~flex駒$は在るならば、［
それらのうち最も［
`始端$／`終端$
］にある駒
］ %駒 が［
%容器 の`主-軸$に平行な`整列~基底線$
］を：
</p>
				<ul>
					<li>
有するならば、
それが %整列~基底線 を与える。
</li>
					<li>
有さないならば、
%駒 の~border~boxから`合成-$される`整列~基底線$が %整列~基底線 を与える。
</li>
				</ul>
◎
Otherwise, if the flex container has at least one flex item, the flex container’s first/last main-axis baseline set is generated from the alignment baseline of the startmost/endmost flex item. (If that item has no alignment baseline parallel to the flex container’s main axis, then one is first synthesized from its border edges.)
</li>
			<li>
他の場合， %容器 は［
最初／最後
］の`基底線~集合$を有さない
— この場合
⇒
%容器 が属する`整列~文脈$の規則に則って`合成-$した結果が %整列~基底線 を与える。
◎
Otherwise, the flex container has no first/last main-axis baseline set, and one is synthesized if needed according to the rules of its alignment context.
</li>
		</ol>
	</dd>

	<dt>
`交叉-軸 基底線~集合@
【交叉-軸に平行な基底線~集合】
◎
first/last cross-axis baseline set
</dt>
	<dd>
<p>
%容器 の［
`行内-軸$と`交叉-軸$
］が合致する場合、
%容器 の［
最初／最後
］の`交叉-軸 基底線~集合$は，次に従って決定される：
◎
When the inline axis of the flex container matches its cross axis, its baselines are determined as follows:
</p>
		<ol>
			<li>
<p>
%容器 内に`~flex駒$は在るならば、
それらのうち最も［
`始端$／`終端$
］にある駒 %駒 が［
%容器 の`交叉-軸$に平行な`整列~基底線$
］を：
</p>
				<ul>
					<li>
有するならば、
それが %整列~基底線 を与える。
</li>
					<li>
有さないならば、
%駒 の~border~boxから`合成-$される`整列~基底線$が %整列~基底線 を与える。
</li>
				</ul>
◎
If the flex container has at least one flex item, the flex container’s first/last cross-axis baseline set is generated from the alignment baseline of the startmost/endmost flex item. (If that item has no alignment baseline parallel to the flex container’s cross axis, then one is first synthesized from its border edges.)
</li>
			<li>
他の場合， %容器 は［
最初／最後
］の`基底線~集合$を有さない
— この場合
⇒
%容器 が属する`整列~文脈$の規則に則って`合成-$した結果が %整列~基底線 を与える。
◎
Otherwise, the flex container has no first/last cross-axis baseline set, and one is synthesized if needed according to the rules of its alignment context.
</li>
		</ol>
	</dd>
</dl>

<p>
上述の規則に則って基底線を計算する際に，
基底線を供与している~boxの `overflow$p が~scrollを許容する値にされている場合、
その基底線を決定する目的においては，［
その~boxは初期~scroll位置にある
］ものと扱うモノトスル。
◎
When calculating the baseline according to the above rules, if the box contributing a baseline has an overflow value that allows scrolling, the box must be treated as being in its initial scroll position for the purpose of determining its baseline.
</p>

<p>
`~table~cellの基底線を決定する＠~CSS2TABLE#height-layout$ときは、
~flex容器が基底線を供する
— ［
行l~boxや `table-row^v `CSS2$r
］のときとちょうど同じく。
◎
When determining the baseline of a table cell, a flex container provides a baseline just as a line box or table-row does. [CSS2]
</p>

<p>
基底線についての詳細は、
CSS Writing Modes 3 の
`§ 基底線 — 序論＠~CSSWM#intro-baselines$,
および CSS Alingment Module の
`§ 基底線~整列の詳細＠~CSSALIGN#baseline-rules$
を見よ。
◎
See CSS Writing Modes 3 § 4.1 Introduction to Baselines and CSS Box Alignment 3 § 9 Baseline Alignment Details for more information on baselines.
</p>
		</section>
	</section>
	<section id="layout-algorithm">
<h2 title="Flex Layout Algorithm">9. ~flex~layout~algo</h2>

<p>
この節には、［
~flex容器とその内容の正確な~layoutの挙動
］について詳細を与える，規範的な~algoが含められている。
これらの~algoは、
可読性と理論~的な単純さを最適化するよう書かれたので，
効率的とは限らない。
実装は，実際の~algoに何を利用してもヨイが、
ここに述べる~algoと同じ結果を生産するモノトスル。
◎
This section contains normative algorithms detailing the exact layout behavior of a flex container and its contents. The algorithms here are written to optimize readability and theoretical simplicity, and may not necessarily be the most efficient. Implementations may use whatever actual algorithms they wish, but must produce the same results as the algorithms described here.
</p>

<p class="note">注記：
この節は、
~~主に実装者~向けに意図されている。
~web~page作者にとっては、
一般に，個々の~propの記述にて十分になるべきである
— ~CSS~layoutについての難解な詳細を理解する切迫した~~動機がない限り、
この節を読む必要はない。
◎
Note: This section is mainly intended for implementors. Authors writing web pages should generally be served well by the individual property descriptions, and do not need to read this section unless they have a deep-seated urge to understand arcane details of CSS layout.
</p>

<p>
以下の下位~節にて，~flex容器とその内容を~lay-outするための~algoを定義する。
◎
The following sections define the algorithm for laying out a flex container and its contents.
</p>

<p class="note">注記：
~flex~layoutは、［
元の文書~順序ではなく，
`order$p により`改変された文書~順序$
］の下で，`~flex駒$たちに対し働く。
◎
Note: Flex layout works with the flex items in order-modified document order, not their original document order.
</p>

◎表記記号

		<section id="box-manip">
<h3 title="Initial Setup">9.1. 初期設定</h3>

<ol start="1">
	<li id="algo-anon-box">
`§ ~flex駒＠#flex-items$
の記述に従って，
<strong>匿名な~flex駒たちを生成する</strong>。
◎
Generate anonymous flex items as described in § 4 Flex Items.
</li>
</ol>

		</section>
		<section id="line-sizing">
<h3 title="Line Length Determination">9.2. 行f長さの決定</h3>

<ol class="continue">
	<li id="algo-available">
<p><strong>（
各~flex駒に可用な空間を，`主-次元$, `交叉-次元$とも決定する
）</strong>
◎
Determine the available main and cross space for the flex items.＼
</p>

<p>
各~次元に対し、
`~flex容器$ %容器 の内容に`可用な空間$は，
次に従って与えられる
（以下、この段における~size, 空間, 等々は，当の次元に属する方を指す）：
◎
For each dimension,＼
</p>
		<ol>
			<li>
~IF［
%容器 の`内容~box$の~sizeは、
`確定的$である
］
⇒
その~size。
◎
if that dimension of the flex container’s content box is a definite size, use that;＼
</li>
			<li>
~ELIF［
%容器 の`内容~box$は、［
`最小-内容 拘束$／`最大-内容 拘束$
］の下で~sizeされている
］
⇒
その拘束として与えられる。
◎
if that dimension of the flex container is being sized under a min or max-content constraint, the available space in that dimension is that constraint;＼
</li>
			<li>
<p>
~ELSE
⇒
%容器 に`可用な空間$から %容器 の［
~margin + ~border + ~padding
］の分を減算した結果の値。
<span class="note">
この値は無限にもなり得る
【すなわち、可用な空間は不定な場合】。
</span>
◎
otherwise, subtract the flex container’s margin, border, and padding from the space available to the flex container in that dimension and use that value.＼
This might result in an infinite value.
</p>
			</li>
		</ol>

<div class="example">
<p>
例えば，【横組み, かつ`主-軸$は`行内-軸$の下で】
`~flex容器$が `~autoS$v に~sizeされていて，`浮動-$している場合、
その中の~flex駒に`可用な空間$は：
◎
For example, the available space to a flex item in a floated auto-sized flex container is:
</p>
<ul>
	<li>
横~次元においては
⇒
( `~flex容器$の包含塊の横幅 ) ~MINUS ( `~flex容器$の横~次元の［
~margin + ~border + ~padding
］ )
◎
the width of the flex container’s containing block minus the flex container’s margin, border, and padding in the horizontal dimension
</li>
	<li>
縦~次元においては
⇒
無限
◎
infinite in the vertical dimension
</li>
</ul>
</div>

	</li>
	<li id="algo-main-item">
<div class="p">
<p><strong>（
~flex駒の`~flex基底~size$, `仮の主size$を決定する
）</strong></p>

<p>
各 `~flex駒$ %駒 の
`~flex基底~size@
は、
次の手続きの結果で与えられる：
</p>

◎
Determine the flex base size and hypothetical main size of each item:
</div>
		<ol>
			<li>
~IF［
%駒 の使用`~flex基底s$は`確定的$である
］
⇒
~RET その~size
◎
If the item has a definite used flex basis, that’s the flex base size.
</li>
			<li>
<p>
~IF［
%駒 は ~AND↓ を満たす
］…
◎
If the flex item has ...
</p>
				<ul>
					<li>
`選好d縦横比$を有する
◎
a preferred aspect ratio,
</li>
					<li>
使用`~flex基底s$ ~EQ `content$v
◎
a used flex basis of content, and
</li>
					<li>
`交叉size$は`確定的$である
◎
a definite cross size,
</li>
				</ul>
<p>
…ならば
⇒
~RET %駒 の使用`交叉size$を %駒 の`選好d縦横比$で乗除算して，主-次元に換算した結果
◎
 then the flex base size is calculated from its used cross size and the flex item’s aspect ratio.
</p>
			</li>
			<li>
<p>
~IF［
%駒 の使用`~flex基底s$ ~EQ `content$v
］~OR［
%駒 の使用`~flex基底s$は %駒 に`可用な空間$に依存する
］：
◎
↓</p>
				<ol>
					<li>
~IF［
~flex容器は［
`最小-内容 拘束$または`最大-内容 拘束$
］の下で~sizeされている（例えば
`自動的~table~layout＠~CSS2TABLE#auto-table-layout$
`CSS2$r
を遂行するとき）
］
⇒
~RET %駒 をその拘束の下で~sizeした結果の， %駒 の`主size$
◎
If the used flex basis is content or depends on its available space, and the flex container is being sized under a min-content or max-content constraint (e.g. when performing automatic table layout [CSS2]), size the item under that constraint. The flex base size is the item’s resulting main size.
</li>
					<li>
<p>
~ELSE（すなわち， %駒 に可用な`主size$は無限であり, %駒 の`行内-軸$は`主-軸$に平行である）
⇒
~RET ［
%駒 を`直交~flow下にある~box用の規則＠~CSSWM#orthogonal-flows$
`CSS3-WRITING-MODES$r
］を利用して~lay-outした結果の， %駒 の最大-内容 `主size$
◎
Otherwise, if the used flex basis is content or depends on its available space, the available main size is infinite, and the flex item’s inline axis is parallel to the main axis, lay the item out using the rules for a box in an orthogonal flow [CSS3-WRITING-MODES]. The flex base size is the item’s max-content main size.
</p>

<p class="note">注記：
この事例は、
例えば，［
`横組み$の英語~文書が包含している~col~flex容器
］が［
縦書き日本語`~flex駒$
］を包含しているときに生じる。
◎
Note: This case occurs, for example, in an English document (horizontal writing mode) containing a column flex container containing a vertical Japanese (vertical writing mode) flex item.
</p>

					</li>
				</ol>
			</li>
			<li>
<p>
~RET ［
%駒 の使用`~flex基底s$を %駒 の`主size$に利用する下で， %駒 を`可用な空間$の中で~sizeした結果
］の %駒 の`主size$
— ここで：
</p>
				<ul>
					<li>
`~flex基底s$に対する値 `content$v は `max-content$v として扱う
</li>
					<li>
%駒 の`主size$を決定するときに %駒 の`交叉size$が必要であり
（例：`主size$は %駒 の塊-軸に属するか， %駒 は`選好d縦横比$を有するとき），
それは［
`~autoS$v であって，`確定的$でない
］ならば、
`交叉size$には `fit-content^v を利用する
</li>
				</ul>
◎
Otherwise, size the item into the available space using its used flex basis in place of its main size, treating a value of content as max-content. If a cross size is needed to determine the main size (e.g. when the flex item’s main size is in its block axis, or when it has a preferred aspect ratio) and the flex item’s cross size is auto and not definite, in this calculation use fit-content as the flex item’s cross size. The flex base size is the item’s resulting main size.
</li>
		</ol>

<p>
`~flex基底~size$を決定するときは、
%駒 の［
`最小-主size$, `最大-主size$
］は無視される（切詰めは生じない）。
加えて、
`box-sizing$p を適用するときに`内容~box$の~sizeを 0 以上に切上げる計算も無視される。
（例えば，駒に［
~size 0, 正な~padding, `box-sizing:border-box$p
］が指定されている場合、
駒の`外縁$sz `~flex基底~size$は 0 になる結果，
その`内縁$sz `~flex基底~size$は負になる。）
◎
When determining the flex base size, the item’s min and max main sizes are ignored (no clamping occurs). Furthermore, the sizing calculations that floor the content box size at zero when applying box-sizing are also ignored. (For example, an item with a specified size of zero, positive padding, and box-sizing: border-box will have an outer flex base size of zero—and hence a negative inner flex base size.)
</p>
	</li>
	<li>
<p><strong>（
~flex駒の`仮の主size$を決定する
）</strong></p>

<p>
各`~flex駒$ %駒 の
`仮の主size@
は
⇒
 %駒 の`~flex基底~size$を %駒 の使用［
`最小-主size$, `最大-主size$
］に則って切詰めた結果
（加えて、
`内容~box$の~sizeが 0 未満になる場合は，
0 以上になるよう さらに切上げる）
</p>
◎
The hypothetical main size is the item’s flex base size clamped according to its used min and max main sizes (and flooring the content box size at zero).
</li>
	<li id="algo-main-container">
<p><strong>
（~flex容器の`主size$を決定する）
</strong>
◎
Determine the main size of the flex container＼
</p>

<p>
`~flex容器$の`主size$を、
それが関与する`整形~文脈$の規則を利用して決定する
◎
using the rules of the formatting context in which it participates.
</p>

<div class="note">
<p>注記：
`~flex容器$ %容器 が`塊~level$である場合、
%容器 の`自動的な塊~size$は，
%容器 の`最大-内容~size$になる。
◎
The automatic block size of a block-level flex container is its max-content size.
</p>
<p>
“塊~layout仕様” が，この等価性を定義するべきであるが、
まだ存在しない。
◎
The Block Layout spec should define this equivalency, but it doesn’t exist yet.
</p>
</div>

	</li>
</ol>

		</section>
		<section id="main-sizing">
<h3 title="Main Size Determination">9.3. 主sizeの決定</h3>

<ol class="continue">
	<li id="algo-line-break">
<p><strong>
各~flex行lの中に，~flex駒たちを収集する
</strong>：
◎
Collect flex items into flex lines:
</p>
		<dl class="switch">
			<dt>
~flex容器は`単-行f$ならば
◎
If the flex container is single-line,＼
</dt>
			<dd>
すべての~flex駒を単独の~flex行lに収集する
◎
collect all the flex items into a single flex line.
</dd>

			<dt>
~flex容器は`複-行f$ならば
◎
Otherwise,＼
</dt>
			<dd>
収集-済みでない最初の駒から順に，連続する駒を，［
収集される`次の^em駒が，~flex容器の`内縁$sz `主size$に収まらないような最初のものになる
］まで, または［
強制d分断に遭遇する（
`§ ~flex~layoutの断片化＠#pagination$
を見よ）
］まで、
順次 収集していく。
ただし，［
収集-済みでない最初の駒
］がいきなり収まり切らないときは、
単に，それのみを~~現在の行fに収集する。
◎
starting from the first uncollected item, collect consecutive items one by one until the first time that the next collected item would not fit into the flex container’s inner main size (or until a forced break is encountered, see § 10 Fragmenting Flex Layout). If the very first uncollected item wouldn’t fit, collect just it into the line.
</dd>
			<dd>
この段においては、
~flex駒の~sizeは，その`外縁$sz `仮の主size$とする。
<span class="note">注記：
これは負にもなり得る。
</span>
◎
For this step, the size of a flex item is its outer hypothetical main size. (Note: This can be negative.)
</dd>
			<dd>
［
すべての~flex駒が~flex行lたちに収集される
］まで，上を繰返す。
◎
Repeat until all flex items have been collected into flex lines.
</dd>
			<dd class="note">注記：
“可能な限り収集する” ことにより、
~size 0 の~flex駒は
— 最後の非 0 ~sizeの駒が行fを正確に “埋尽くして” いたとしても —
前の行fの終端に収集されることになる。
◎
Note that the "collect as many" line will collect zero-sized flex items onto the end of the previous line even if the last non-zero item exactly "filled up" the line.
</dd>
		</dl>
	</li>
	<li id="algo-flex">
`~flex可能な長さを解決-＠#resolve-flexible-lengths$して、
すべての~flex駒について，
その使用`主size$を見出す。
◎
Resolve the flexible lengths of all the flex items to find their used main size. See § 9.7 Resolving Flexible Lengths.
</li>
</ol>

		</section>
		<section id="cross-sizing">
<h3 title="Cross Size Determination">9.4. 交叉sizeの決定</h3>

<ol class="continue">
	<li id="algo-cross-item">
<p><strong>（
駒の仮の交叉sizeを決定する
）</strong></p>
<p>
各~駒の
`仮の交叉size@
を、［
駒は`~flow内$にある`塊~level$の~boxで，その使用`主size$【は前節で決定したそれ】を伴うものであった
］かのように，所与の`可用な空間$において~layoutを遂行することにより決定する
— `~autoS$v 【`交叉size$】は `fit-content^v として扱う下で。
</p>
◎
Determine the hypothetical cross size of each item by performing layout as if it were an in-flow block-level box with the used main size and the given available space, treating auto as fit-content.
</li>
	<li id="algo-cross-line">
<p><strong>（
各~flex行lの交叉sizeを計算する
）</strong>：
◎
Calculate the cross size of each flex line.
</p>
		<ol>
			<li>
~IF［
~flex容器は`単-行f$である
］~AND［
~flex容器の`交叉size$は`確定的$である
］
⇒
~flex行lの`交叉size$ ~SET `~flex容器$の`内縁$sz `交叉size$
◎
If the flex container is single-line and has a definite cross size, the cross size of the flex line is the flex container’s inner cross size.
</li>
			<li>
<p>
~IF［
`~flex容器$は`複-行f$である
］：
◎
Otherwise, for each flex line:
</p>
				<ol>
					<li>
<p>
~EACH( `~flex行l$ %行f ) に対し：
</p>
						<ol>
							<li>
( %交叉size, %上面~size, %下面~size ) ~LET ( 0, 0, 0 )
</li>
							<li>
<p>
%行f 内の
~EACH( `~flex駒$ %駒 )
に対し：
</p>

								<ol>
									<li>
<p>
~IF［
%駒 は ~AND↓ を満たす
］…
</p>
										<ul>
											<li>
行内-軸は主-軸に平行である
</li>
											<li>
`align-self$p は `baseline$vA
</li>
											<li>
交叉-軸~marginは両側とも非 `auto^v
</li>
										</ul>
<p>
…ならば：
</p>
										<ol>
											<li>
%上面~size ~SET `max^op( %上面~size, %駒 の基底線と %駒 の仮の`外縁$sz 交叉-始端~辺との合間の距離 )
</li>
											<li>
%下面~size ~SET `max^op( %下面~size, %駒 の基底線と %駒 の仮の`外縁$sz 交叉-終端~辺との合間の距離 )
</li>
										</ol>
									</li>
									<li>
~ELSE
⇒
%交叉size ~SET `max^op( %交叉size, %駒 の`外縁$sz `仮の交叉size$ )
</li>
								</ol>
◎
Collect all the flex items whose inline-axis is parallel to the main-axis, whose align-self is baseline, and whose cross-axis margins are both non-auto. Find the largest of the distances between each item’s baseline and its hypothetical outer cross-start edge, and the largest of the distances between each item’s baseline and its hypothetical outer cross-end edge, and sum these two values.
◎
Among all the items not collected by the previous step, find the largest outer hypothetical cross size.
</li>
							<li>
%行f の使用`交叉size$ は
⇒
`max^op( %交叉size, ( %上面~size ~PLUS %下面~size ) )
◎
The used cross-size of the flex line is the largest of the numbers found in the previous two steps and zero.
</li>
						</ol>
					</li>
				</ol>
			</li>
			<li>
~IF［
~flex容器は`単-行f$である
］
⇒
その行fの`交叉size$を 容器の算出d［
`最小-交叉size$, `最大-交叉size$
］で切詰める。
<span class="note">
`CSS2$r による `min/max-width/height^p の定義が より一般に適用される場合、
この挙動は自動的に `fall out^en することに注意【？】。【！＊】
</span>
◎
If the flex container is single-line, then clamp the line’s cross-size to be within the container’s computed min and max cross sizes. Note that if CSS 2.1’s definition of min/max-width/height applied more generally, this behavior would fall out automatically.
</li>
		</ol>
	</li>
	<li id="algo-line-stretch">
<p><strong>（
`align-content:stretch^p を取扱う
）</strong>
◎
Handle 'align-content: stretch'.＼
</p>

<div class="p">
<p>
~IF［
~flex容器は ~AND↓ を満たす
］…
</p>
		<ul>
			<li>
`交叉size$は`確定的$である
</li>
			<li>
`align-content$p は `stretch$vC
</li>
			<li>
`内縁$sz `交叉size$ ~GT 各~flex行lの`交叉size$の総和
</li>
		</ul>
◎
If the flex container has a definite cross size, align-content is stretch, and the sum of the flex lines' cross sizes is less than the flex container’s inner cross size,＼
</div>

<p>
…ならば
⇒
各~flex行lの`交叉size$を，次が満たされるよう等量に増大させる
⇒
すべての~flex行lの`交叉size$の総和 ~EQ ~flex容器の`内縁$sz `交叉size$
◎
increase the cross size of each flex line by equal amounts such that the sum of their cross sizes exactly equals the flex container’s inner cross size.
</p>
	</li>
	<li id="algo-visibility">
<p><strong>（
`visibility:collapse^p にされている駒を`畳む$
）</strong>
◎
Collapse visibility:collapse items.＼
</p>

<p>
~IF［
`visibility:collapse$p にされている~flex駒はある
］：
◎
If any flex items have visibility: collapse,＼
</p>
		<ol>
			<li>
そのような
~EACH( %駒 )
に対し
⇒
%駒 の
`支柱~size@
~SET %駒 が属する行fの`交叉size$
◎
note the cross size of the line they’re in as the item’s strut size, and＼
</li>
			<li>
<p>
~layoutを始めから再開始する
— この 2 周目の~layout回においては：
◎
restart layout from the beginning.
◎
In this second layout round,＼
</p>

			<ul>
					<li>
`駒たちを各~行fに収集する段＠#algo-line-break$においては
⇒
`畳まれ$た駒の`主size$は， 0 として扱う
◎
when collecting items into lines, treat the collapsed items as having zero main size.＼
</li>
					<li>
前項の段から`各~行fの交叉sizeを計算する段＠#algo-cross-line$までは
⇒
`畳まれ$た駒については，まるごと（ `display:none$p であったかのように）無視する
◎
For the rest of the algorithm following that step, ignore the collapsed items entirely (as if they were display:none) except that＼
</li>
					<li>
前項より後の段においては
⇒
各~行fの`交叉size$を［
その行f内の`畳まれ$た すべての駒の中で最~大な`支柱~size$
］以上になる様に切り上げる。
◎
after calculating the cross size of the lines, if any line’s cross size is less than the largest strut size among all the collapsed items in the line, set its cross size to that strut size.
</li>
				</ul>
			</li>
		</ol>

<p>
2 周目の~layout回においては，この段は飛ばす。
◎
Skip this step in the second layout round.
</p>

	</li>
	<li id="algo-stretch">
<p><strong>（
各~flex駒の使用`交叉size$を決定する
）</strong>
◎
Determine the used cross size＼
</p>

<p>
~EACH( `~flex駒$ %駒 )
に対し：
◎
of each flex item.＼
</p>
		<ol>
			<li>
<p>
~IF［
%駒 は ~AND↓ を満たす
］…
</p>
				<ul>
					<li>
`align-self:stretch$p にされている【！指定d値？】
</li>
					<li>
`交叉size~prop$の`算出d値$は `~autoS$v
</li>
					<li>
交叉-軸~marginは両側とも非 `auto^v
</li>
				</ul>

<p>
…ならば
⇒
%駒 の使用（`外縁$sz）`交叉size$ ~SET ［
%駒 が属する~flex行lの使用`交叉size$
］を %駒 の使用［
`最小-交叉size$, `最大-交叉size$
］に則って切詰めた結果
</p>
◎
If a flex item has align-self: stretch, its computed cross size property is auto, and neither of its cross-axis margins are auto, the used outer cross size is the used cross size of its flex line, clamped according to the item’s used min and max cross sizes.＼
</li>
			<li>
~ELSE
⇒
%駒 の使用`交叉size$ ~SET %駒 の`仮の交叉size$
◎
Otherwise, the used cross size is the item’s hypothetical cross size.
</li>
			<li>
~IF［
%駒 は `align-self:stretch$p にされている
］
⇒
~sizeが百分率の子を解決できるようにするため、
前~段で得られた使用~sizeを %駒 の確定的な`交叉size$として扱う下で，
%駒 の内容の~layoutをやり直す
◎
If the flex item has align-self: stretch, redo layout for its contents, treating this used size as its definite cross size so that percentage-sized children can be resolved.
</li>
		</ol>

<p class="note">注記：
この段は %駒 の`主size$には影響しない。
それが`選好d縦横比$を有していたとしても。
◎
Note that this step does not affect the main size of the flex item, even if it has a preferred aspect ratio.
</p>

	</li>
</ol>

		</section>
		<section id="main-alignment">
<h3 title="Main-Axis Alignment">9.5. 主-軸~沿いの整列</h3>

<ol>
	<li id="algo-main-align">
<p><strong>（
自由空間を分配する
）</strong>
◎
Distribute any remaining free space.＼
</p>

<p>
~EACH( ~flex行l %行f )
に対し：
◎
For each flex line:
</p>

		<ol>
			<li>
%自由空間 ~LET `max^op( %行f の自由空間, 0 )
◎
↓</li>
			<li>
~IF［
%行f の主-軸~marginは両側とも `auto^v
］
⇒
両側の~margin ~SET %自由空間 ~DIV 2
◎
If the remaining free space is positive and at least one main-axis margin on this line is auto, distribute the free space equally among these margins.＼
◎
Otherwise, set all auto margins to zero.
</li>
			<li>
~ELIF［
%行f の主-軸~marginは片側だけ `auto^v
］
⇒
その~~側の~margin ~SET %自由空間
◎
↑</li>
			<li>
%行f 内の駒たちを，
`justify-content$p に従って主-軸~沿いに整列させる
◎
Align the items along the main-axis per justify-content.
</li>
		</ol>
	</li>
</ol>

		</section>
		<section id="cross-alignment">
<h3 title="Cross-Axis Alignment">9.6. 交叉-軸~沿いの整列</h3>

<p>
この節における［
始端 ／ 終端
］は、
`交叉-軸$における［
`始端$／`終端$
］を指すとする。
◎
↓</p>

<ol class="continue">
	<li id="algo-cross-margins">
<div>
<p><strong>（
交叉-軸 `auto^v ~marginを解決する
）</strong></p>

<p>
~EACH( ~flex駒 %駒 )
に対し：
</p>
◎
Resolve cross-axis auto margins.＼
</div>
		<ol>
			<li>
~IF［
%駒 の始端~margin ~NEQ `auto^v
］~AND［
%駒 の終端~margin ~NEQ `auto^v
］
⇒
~CONTINUE
◎
If a flex item has auto cross-axis margins:
</li>
			<li>
%交叉size ~LET %駒 が属する~flex行lの`交叉size$
◎
↓</li>
			<li>
%差分~size ~LET
%交叉size ~MINUS ［
`auto^v ~marginは 0 として扱う下での， %駒 の`外縁$sz `交叉size$
］
◎
↓</li>
			<li>
<p>
~IF［
%差分~size ~GT 0
］：
</p>
				<ol>
					<li>
~IF［
%駒 の始端~margin ~EQ `auto^v
］~AND［
%駒 の終端~margin ~EQ `auto^v
］
⇒＃
%駒 の始端~margin ~SET %差分~size ~DIV 2；
%駒 の終端~margin ~SET %差分~size ~DIV 2
</li>
					<li>
~ELIF［
%駒 の始端~margin ~EQ `auto^v
］
⇒
%駒 の始端~margin ~SET %差分~size
</li>
					<li>
~ELSE（ %駒 の終端~margin ~EQ `auto^v ）
］
⇒
%駒 の終端~margin ~SET %差分~size
</li>
				</ol>
◎
If its outer cross size (treating those auto margins as zero) is less than the cross size of its flex line, distribute the difference in those sizes equally to the auto margins.
</li>
			<li>
<p>
~ELSE：
</p>
				<ol>
					<li>
~IF［
%駒 の始端~margin ~EQ `auto^v
］
⇒
%駒 の始端~margin ~SET 0
</li>
					<li>
%駒 の終端~margin ~SET 次を満たすようにする~size
⇒
%駒 の`外縁$sz `交叉size$ ~EQ %交叉size
</li>
				</ol>

◎
Otherwise, if the block-start or inline-start margin (whichever is in the cross axis) is auto, set it to zero.＼
Set the opposite margin so that the outer cross size of the item equals the cross size of its flex line.
</li>
		</ol>
	</li>
	<li id="algo-cross-align">
<p><strong>（
各~駒を交叉-軸~沿いに整列する
）</strong></p>

<p>
~EACH( ~flex駒 %駒 )
に対し
⇒
~IF［
%駒 の始端~margin ~NEQ `auto^v
］~AND［
%駒 の終端~margin ~NEQ `auto^v
］
⇒
%駒 の `align-self$p に従って， %駒 を交叉-軸~沿いに整列する
</p>
◎
Align all flex items along the cross-axis per align-self, if neither of the item’s cross-axis margins are auto.
</li>
	<li id="algo-cross-container">
<p><strong>（
~flex容器の使用`交叉size$を決定する
）</strong>
◎
Determine the flex container’s used cross size＼
</p>

<p>
`~flex容器$が関与している`整形~文脈$の規則を利用して，その使用`交叉size$を決定する
— 内容に基づく`交叉size$が必要になる場合、
各［
`~flex行l$の`交叉size$
］の総和を利用する。
◎
using the rules of the formatting context in which it participates. If a content-based cross size is needed, use the sum of the flex lines' cross sizes.
</p>
	</li>
	<li id="algo-line-align">
<p><strong>（
すべての~flex行lを整列する
）</strong></p>
<p>
~flex容器~内のすべての~flex行lを，容器の `align-content$p に従って整列する
</p>
◎
Align all flex lines per align-content.
</li>
</ol>

		</section>
		<section id="resolve-flexible-lengths">
<h3 title="Resolving Flexible Lengths">9.7. ~flex可能な長さの解決-法</h3>

<p>
所与の~flex行l上の各`~flex駒$（以下，単に “駒” ）の~flex可能な長さを，以下に従って解決する【それらの駒の使用`主size$を確定する】：
◎
To resolve the flexible lengths of the items within a flex line:
</p>
<ol>
	<li>
%容器~size ~LET ~flex容器の`内縁$sz `主size$
◎
↓</li>
	<li>
%伸縮~mode ~LET ［
各 駒の`外縁$sz `仮の主size$の総和 ~LT %容器~size
ならば `伸長-^i ／
~ELSE_ `縮短-^i
］
⇒
以下における “駒の `~flex係数^i” は、
%伸縮~mode に応じて，次を表すとする
⇒＃
`伸長-^i ならば 駒の`~flex伸長-係数$ ／
`縮短-^i ならば 駒の`~flex縮短-係数$
◎
Determine the used flex factor. Sum the outer hypothetical main sizes of all items on the line. If the sum is less than the flex container’s inner main size, use the flex grow factor for the rest of this algorithm; otherwise, use the flex shrink factor.
</li>
	<li>
各~駒には
`~target主size@
があり，初期~時には`~flex基底~size$に設定されるとする。
◎
Each item in the flex line has a target main size, initially set to its flex base size.＼
</li>
	<li>
<p>
各~駒は、
初期~時には `未~凍結-^i とする
— 駒は、
以下のある時点で凍結されることになる。
◎
Each item is initially unfrozen and may become frozen.
</p>
<p class="note">注記：
凍結された駒の`~target主size$は、
それ以降，変化しない。
◎
Note: An item’s target main size doesn’t change after freezing.
</p>
	</li>
	<li>
<p><strong>（
~flex不能な駒を~sizeする
）</strong>
◎
Size inflexible items.＼
</p>

<p>
~EACH( %駒 )
に対し：
◎
Freeze, setting its target main size to its hypothetical main size…
</p>
		<ol>
			<li>
~IF［
%駒 の `~flex係数^i ~NEQ 0
］
⇒
~CONTINUE
◎
any item that has a flex factor of zero
</li>
			<li>
~IF［
%伸縮~mode ~EQ `伸長-^i
］~AND［
%駒 の`~flex基底~size$ ~LTE %駒 の`仮の主size$
］
⇒
~CONTINUE
◎
if using the flex grow factor: any item that has a flex base size greater than its hypothetical main size
</li>
			<li>
~ELIF［
%伸縮~mode ~EQ `縮短-^i
］~AND［
%駒 の`~flex基底~size$ ~GTE %駒 の`仮の主size$
］
⇒
~CONTINUE
◎
if using the flex shrink factor: any item that has a flex base size smaller than its hypothetical main size
</li>
			<li>
%駒 の`~target主size$ ~SET `仮の主size$
◎
↑</li>
			<li>
%駒 を凍結する
◎
↑</li>
		</ol>
	</li>
	<li>
%初期~自由空間 ~LET %容器~size
~MINUS ( 凍結された すべての駒の外縁`~target主size$の総和 )
~MINUS ( 未~凍結-な すべての駒の外縁`~flex基底~size$の総和 )
◎
Calculate initial free space. Sum the outer sizes of all items on the line, and subtract this from the flex container’s inner main size. For frozen items, use their outer target main size; for other items, use their outer flex base size.
</li>
	<li>
<p>
~WHILE［
未~凍結-な駒はある
］：
◎
Loop:
◎
Check for flexible items. If all the flex items on the line are frozen, free space has been distributed; exit this loop.
</p>
		<ol>
			<li id="free-space">
%残りの自由空間 ~LET %容器~size ~MINUS ( すべての駒の`~target主size$の総和 )
◎
Calculate the remaining free space as for initial free space, above.＼
</li>
			<li>
%~flex係数の総和 ~LET 未~凍結-な すべての駒の `~flex係数^i の総和
◎
If the sum of the unfrozen flex items’ flex factors＼
</li>
			<li>
<p>
~IF［
%~flex係数の総和 ~LT 1
］：
</p>
				<ol>
					<li>
%上限 ~LET %初期~自由空間 ~MUL %~flex係数の総和
</li>
					<li>
~IF［
%残りの自由空間 の絶対値 ~GT %上限 の絶対値
］
⇒
%残りの自由空間 ~SET %上限
</li>
				</ol>
◎
is less than one, multiply the initial free space by this sum. If the magnitude of this value is less than the magnitude of the remaining free space, use this as the remaining free space.
</li>
			<li>
<p>
<strong>（
~flex係数に比例するよう自由空間を分配する
）</strong>
◎
↓</p>

<p>
~IF［
%残りの自由空間 ~NEQ 0
］：
◎
If the remaining free space is non-zero, distribute it proportional to the flex factors:
</p>
				<ol>
					<li>
~IF［
%伸縮~mode ~EQ `伸長-^i
］
⇒
未~凍結-な
~EACH( %駒 )
に対し
⇒
%駒 の`~target主size$ ~SET
%駒 の`~flex基底~size$ ~PLUS (
%残りの自由空間 ~MUL (
( %駒 の `~flex係数^i ) ~DIV %~flex係数の総和
))
◎
If using the flex grow factor
◎
For every unfrozen item on the line, find the ratio of the item’s flex grow factor to the sum of the flex grow factors of all unfrozen items on the line. Set the item’s target main size to its flex base size plus a fraction of the remaining free space proportional to the ratio.
</li>
					<li>
<p>
~ELSE（ %伸縮~mode ~EQ `縮短-^i ）：
</p>

<p>
この段においては、
各 駒は
`拡縮済み~flex縮短-係数@i
を有する。
</p>

						<ol>
							<li>
未~凍結-な
~EACH( %駒 )
に対し
⇒
%駒 の `拡縮済み~flex縮短-係数^i ~SET ( %駒 の `~flex係数^i ) ~MUL ( %駒 の`内縁$sz `~flex基底~size$ )
</li>
							<li>
%係数の総和 ~LET
未~凍結-な すべての %駒 の `拡縮済み~flex縮短-係数^i の総和
</li>
							<li>
未~凍結-な
~EACH ( %駒 )
に対し
⇒
%駒 の`~target主size$ ~SET
( %駒 の`~flex基底~size$ ) ~MINUS (
( %残りの自由空間 の絶対値 ) ~MUL (
( %駒 の `拡縮済み~flex縮短-係数^i ) ~DIV %係数の総和
))
</li>
						</ol>

<p class="note">注記：
これにより、
駒の`内縁$sz `主size$は一時的に負になり得るが，
次の段で正される。
</p>

◎
If using the flex shrink factor
◎
For every unfrozen item on the line, multiply its flex shrink factor by its inner flex base size, and note this as its scaled flex shrink factor. Find the ratio of the item’s scaled flex shrink factor to the sum of the scaled flex shrink factors of all unfrozen items on the line. Set the item’s target main size to its flex base size minus a fraction of the absolute value of the remaining free space proportional to the ratio. Note this may result in a negative inner main size; it will be corrected in the next step.
</li>
				</ol>
			</li>
			<li>
<p><strong>（
最小-／最大-
違反を補正する
）</strong></p>

<p>
未~凍結-な
~EACH( %駒 )
に対し
⇒
%駒 の`~target主size$ ~SET %駒 の`~target主size$を %駒 の使用［
`最小-主size$, `最大-主size$
］で切詰めた結果
— 加えて、
`内容~box$の~sizeが 0 未満になる場合、
0 以上になるよう さらに切上げる
</p>

<p>
これにより，`~target主size$が［
増えた駒は “最小-違反” ／ 減った駒は “最大-違反”
］とされる。
</p>

◎
Fix min/max violations. Clamp each non-frozen item’s target main size by its used min and max main sizes and floor its content-box size at zero. If the item’s target main size was made smaller by this, it’s a max violation. If the item’s target main size was made larger by this, it’s a min violation.
</li>
			<li>
<p><strong>
（~flexが効き過ぎている駒を凍結する）
</strong>
◎
Freeze over-flexed items.＼
</p>

<p>
未~凍結-な駒のうち，次に該当するものを凍結する
⇒
前~段による切詰め量の総和（減った量は負であるとみなす）に応じて
⇒＃
0 ならば すべて ／
正であるならば 最小-違反とされたもの ／
負であるならば 最大-違反とされたもの
◎
The total violation is the sum of the adjustments from the previous step ∑(clamped size - unclamped size). If the total violation is:
• Zero
•• Freeze all items.
• Positive
•• Freeze all the items with min violations.
• Negative
•• Freeze all the items with max violations.
</p>

<p class="note">注記：
これは 1 個以上の駒を凍結するので、
~loopは進捗して最終的に終了する。
◎
Note: This freezes at least one item, ensuring that the loop makes progress and eventually terminates.
◎
• Return to the start of this loop.
</p>

			</li>
		</ol>
	</li>
	<li>
~EACH( %駒 )
に対し
⇒
%駒 の使用`主size$ ~SET %駒 の`~target主size$
◎
Set each item’s used main size to its target main size.
</li>
</ol>

		</section>
		<section id="definite-sizes">
<h3 title="Definite and Indefinite Sizes">9.8. 確定的な~sizeと不定な~size</h3>

<p>
`CSS-SIZING-3$r は，長さが［
`確定的＠~SIZING#definite$ ／
`不定＠~SIZING#indefinite$
］であることを定義しているが、
~flex~layout【！Flexbox】においては，長さが
`確定的@
と見なされ得る追加的な事例が いくつかある：
◎
Although CSS Sizing [CSS-SIZING-3] defines definite and indefinite lengths, Flexbox has several additional cases where a length can be considered definite:
</p>
<ol>
	<li>
`~flex容器$の`主size$は`確定的$である場合、
その`~flex駒$の~flex~~処理後の`主size$も`確定的$として扱われる。
◎
If the flex container has a definite main size, then the post-flexing main sizes of its flex items are treated as definite.
</li>
	<li>
`~flex駒$の`~flex基底s$は`確定的$である場合、
その~flex~~処理後の`主size$も`確定的$になる。
◎
If a flex item’s flex basis is definite, then its post-flexing main size is also definite.
</li>
	<li>
`単-行f$な`~flex容器$の`交叉size$が確定的である場合、
`伸張され$るどの`~flex駒$についても，そのr［
`自動的$sz `選好d$sz `外縁$sz `交叉size$
］は［
~flex容器の
（`~flex駒$の［
最小-, 最大-
］`交叉size$に切詰められた）
`内縁$sz `交叉size$
］になり，`確定的$と見なされる。
◎
If a single-line flex container has a definite cross size, the automatic preferred outer cross size of any stretched flex items is the flex container’s inner cross size (clamped to the flex item’s min and max cross size) and is considered definite.
</li>
	<li>
`~flex行l$の`交叉size$が決定されたなら、［
自動-~sizeされた~flex容器
］内にある駒の`交叉size$は，~layoutの目的においては`確定的$と見なされる
— `駒の交叉sizeを決定する段＠#algo-stretch$
を見よ。
◎
Once the cross size of a flex line has been determined, the cross sizes of items in auto-sized flex containers are also considered definite for the purpose of layout; see step 11.
</li>
</ol>

<p class="note">注記：
したがって，`~flex~layout$の中で “確定的” な~sizeを得るためには、
~layoutを遂行することが要求され得る。
これが行われるのは、［
`~flex駒$の内側における百分率は、
作者が それを解決するよう期待した所で解決する
］ことを許容するためである。
◎
Note: This means that within flex layout, “definite” sizes can require performing layout. This was done to allow percentages inside of flex items to resolve where authors expected them to resolve.
</p>

		</section>
		<section id="intrinsic-sizes">
<h3 title="Intrinsic Sizes">9.9. 内在的~size</h3>

<p>
`~flex容器$の`内在的~sizing$は、
種々の型の 内容に基づく自動的~sizingの基になる
— `内容が収まる行内~size$
（内容が収まる（ `fit-content^en ）公式が利用される）
や,
内容に基づく`塊~size$
（`最大-内容~size$が利用される）
など。
この算出にあたっては、
~flex駒に対する `auto^v ~marginは `0^v として扱われる。
◎
The intrinsic sizing of a flex container is used to produce various types of content-based automatic sizing, such as shrink-to-fit logical widths (which use the fit-content formula) and content-based logical heights (which use the max-content size). For these computations, auto margins on flex items are treated as 0.
</p>

<p>
この節に現れる各種~用語については、
`CSS-SIZING-3$r を見よ。
◎
See [CSS-SIZING-3] for a definition of the terms in this section.
</p>

			<section id="intrinsic-main-sizes">
<h4 title="Flex Container Intrinsic Main Sizes">9.9.1. ~flex容器の内在的~主size</h4>

<p>
`~flex容器$ %容器 の`主-軸$沿いの［
最大-／最小-
］内容~sizeは，理論~的には：
◎
↓</p>
<ul>
	<li>
`最大-内容~size$は、
~flex~layoutを次に従うよう走らすとき，
%容器 が占め得る最~小な~sizeになる
⇒
%容器 ~sizeの下で，
%容器 内の各`~flex駒$を［
その`最大-内容 供与$fX 以上, その~flex能に許容される限り
］大きくする。
◎
The max-content main size of a flex container is, theoretically, the smallest size the flex container can take such that when flex layout is run with that container size, each flex item ends up at least as large as its max-content contribution, to the extent allowed by the items’ flexibility.
</li>
	<li>
<p>
`最小-内容~size$は、
%容器 内の各`~flex駒$が ~OR↓ を満たすとき，
%容器 が占め得る最~小な~sizeになる：
</p>
		<ul>
			<li>
［
%容器 を~overflowしない
］~AND［
その内容は当の駒を~overflowしない
］
</li>
			<li>
~boxを~overflowするよう~layoutするものと`定義された^em~size
（例えば，
負な~marginを伴う／
結果的に 100% を超えるような百分率~size）
に設定された
</li>
		</ul>
◎
The min-content main size of a flex container is, theoretically, the smallest size the flex container can take such that no items overflow it, and no item’s contents overflow the item—​setting aside the cases in which the boxes layouts are defined to overflow (for example with negative margins or percentage sizes that add up to more than 100%).
</li>
</ul>

				<section id="intrinsic-main-sizes-ideal">
<h5 title="Ideal Algorithm">9.9.1.1. 理想的な~algo</h5>

<p class="note">注記：
次の~algoは、
`~flex容器$の理想的な内在的`主size$を計算する。
しかしながら、
それは，初期~時は正しく実装されなかったため、
既存の内容は，不正に実装された挙動に（あいにく，一貫して）依存するようになった
— それは、
`~Web互換でない＠~CSSissue/8884$。
［
実装者, ~CSS~WG
］は、［
~Web~browser実装が，どこまで安全にこの挙動へ~approachできるか
］を究明しており，
更なる試験結果を歓迎する。
◎
Note: The following algorithm calculates the flex container’s ideal intrinsic main sizes. However, because it was not implemented correctly initially, and existing content became dependent on the (unfortunately consistent) incorrect implemented behavior, it is not Web-compatible. Implementers and the CSS Working Group are investigating to what extent Web browser implementations can safely approach this behavior, and further experimentation is welcome.
</p>

<p>
それは、
`畳まれ$ていない`~flex駒$に限り考慮する下で，次に従う：
◎
Considering only non-collapsed flex items;
</p>
<ol>
	<li>
<p>
%容器 内の
~EACH( %駒 )
に対し：
</p>
		<ol>
			<li>
%~flex量 ~SET ( %駒 の`最大-内容 供与$fX ) ~MINUS ( %駒 の`外縁$sz `~flex基底~size$ )
</li>
			<li>
<p>
%駒 の `欲される~flex割合分^i ~LET %~flex量 に応じて：
</p>
				<ul class="switch">
					<li>
正ならば
⇒
%駒 の `~flex伸長-係数$に応じて
⇒＃
1 以上ならば ( %~flex量 ~DIV %駒 の `~flex伸長-係数$ ) ／
1 未満ならば ( %~flex量 ~MUL %駒 の `~flex伸長-係数$ )
</li>
					<li>
負ならば
⇒
%駒 の `拡縮済み~flex縮短-係数$iに応じて
⇒＃
0 ならば 負な無限大／
~ELSE_ ( %~flex量 ~DIV %駒 の `拡縮済み~flex縮短-係数$i )
</li>
					<li>
0 ならば
⇒
0
</li>
				</ul>
			</li>
		</ol>
◎
For each flex item,＼
subtract its outer flex base size from its max-content contribution size.＼
If that result is positive, divide it by the item’s flex grow factor if the flex grow factor is ≥ 1, or multiply it by the flex grow factor if the flex grow factor is &lt; 1;＼
if the result is negative, divide it by the item’s scaled flex shrink factor (if dividing by zero, treat the result as negative infinity).＼
This is the item’s desired flex fraction.
</li>
	<li>
%容器 内のすべての`~flex駒$を長さ無限な行fたちの中に配置する
◎
Place all flex items into lines of infinite length.＼
</li>
	<li>
<p>
%容器 を成す
~EACH( 行f %行f )
に対し，
%行f の `~size^i を次に従って計算する：
◎
Within each line,＼
</p>
		<ol>
			<li>
%L ~LET %行f 内に~layoutされる`~flex駒$たちが成す集合
◎
↓</li>
			<li>
%選ばれた~flex割合分 ~LET `max^op( %駒 の `欲される~flex割合分^i ； %駒 ~IN %L )
◎
find the greatest (most positive) desired flex fraction among all the flex items. This is the line’s chosen flex fraction.
</li>
			<li>
%~mode ~LET %選ばれた~flex割合分 に応じて
⇒＃
正ならば `伸長する^i ／
負ならば `縮短する^i ／
0 ならば ε
◎
↓</li>
			<li>
<p>
~IF［
%~mode ~EQ `伸長する^i
］：
</p>
				<ol>
					<li>
%総和 ~LET ∑ %駒 の`~flex伸長-係数$ ； %駒 ~IN %L
</li>
					<li>
~IF［
%総和 ~LT 1
］
⇒
%選ばれた~flex割合分 ~SET %選ばれた~flex割合分 ~DIV %総和
</li>
				</ol>
◎
If the chosen flex fraction is positive, and the sum of the line’s flex grow factors is less than 1, divide the chosen flex fraction by that sum.
</li>
			<li>
<p>
~IF［
%~mode ~EQ `縮短する^i
］：
</p>
				<ol>
					<li>
%総和 ~LET ∑ %駒 の`~flex縮短-係数$ ； %駒 ~IN %L
</li>
					<li>
~IF［
%総和 ~LT 1
］
⇒
%選ばれた~flex割合分 ~SET %選ばれた~flex割合分 ~MUL %総和
</li>
				</ol>
◎
If the chosen flex fraction is negative, and the sum of the line’s flex shrink factors is less than 1, multiply the chosen flex fraction by that sum.
</li>
			<li>
<p>
~EACH( %駒 ~IN %L )
に対し，
%駒 の `~size^i を次に従って計算する：
</p>
				<ol>
					<li>
%~size ~LET %駒 の`~flex基底~size$
</li>
					<li>
~IF［
%~mode ~EQ `伸長する^i
］
⇒
%~size ~INCBY %駒 の`~flex伸長-係数$ ~MUL %選ばれた~flex割合分
</li>
					<li>
~IF［
%~mode ~EQ `縮短する^i
］
⇒
%~size ~INCBY %駒 の`~flex縮短-係数$ ~MUL %選ばれた~flex割合分
</li>
					<li>
%駒 の `~size^i ~LET `max^op( `min^op( %~size, %駒 の`最大-主size$ ), %駒 の`最小-主size$ )
</li>
				</ol>

◎
Add each item’s flex base size to the product of its flex grow factor (scaled flex shrink factor, if shrinking) and the chosen flex fraction, then clamp that result by the max main size floored by the min main size.
</li>
			<li>
%行f の `~size^i ~LET ∑ %駒 の `~size^i ； %駒 ~IN %L
◎
↓</li>
		</ol>
	</li>
	<li>
`~flex容器$ %容器 の`最大-内容~size$は
⇒
`max^op( %行f の `~size^i ； %行f ~IN { %容器 を成す行fたち } )
◎
The flex container’s max-content size is the largest sum (among all the lines) of the afore-calculated sizes of all items within a single line.
</li>
</ol>

<p>
`~flex容器$ %容器 は`単-行f$である場合、
%容器 の`主-軸$沿いの`最小-内容~size$は，次を除いて［
%容器 の`主-軸$沿いの`最大-内容~size$
］と同じに計算される
⇒
%容器 内の各`~flex駒$に対し，その`最大-内容 供与$fXに代えて`最小-内容 供与$fXが利用される
◎
The min-content main size of a single-line flex container is calculated identically to the max-content main size, except that the flex items’ min-content contributions are used instead of their max-content contributions.
</p>

<details class="note">
<summary>注記：
~flexの総和 ~LT 1 のときにおける，この~algoの含意
◎
Implications of this algorithm when the sum of flex is less than 1
</summary>

<p>
上の~algoは、
次の 2 つの事例に対し，正しい挙動を与えるよう設計されている
— 特に、
この 2 つの間で，`~flex容器$の~sizeが連続的に遷移するようにする：
◎
The above algorithm is designed to give the correct behavior for two cases in particular, and make the flex container’s size continuous as you transition between the two:
</p>

<ul>
	<li>
`~flex容器$を成す どの駒も~flex不能な場合、
`~flex容器$の~sizeは，それらの`~flex基底~size$の総和になる。
（~flex不能な`~flex基底~size$は、
基本的に［
`width$p ／ `height$p
］の代用になる
— それは、
指定されていれば，［
塊~layoutにおいて`最大-内容 供与$が基づくもの
］を与える。）
◎
If all items are inflexible, the flex container is sized to the sum of their flex base size. (An inflexible flex base size basically substitutes for a width/height, which, when specified, is what a max-content contribution is based on in Block Layout.)
</li>
	<li>
すべての駒が［
~flex可能かつ `~flex係数$ ~GTE 1
］である場合、
`~flex容器$は，［
それを成す駒たちの`最大-内容 供与$の総和
］に~sizeされる
（あるいは、
たぶん，少し大きい~sizeになる
— どの~flex駒も、
その`最大-内容 供与$ `以上の~sizeになる^emようにしつつ，［
その~flex能により決定される~size
］の［
他の駒の~sizeに対する比率
］が正しくなるよう）。
◎
When all items are flexible with flex factors ≥ 1, the flex container is sized to the sum of the max-content contributions of its items (or perhaps a slightly larger size, so that every flex item is at least the size of its max-content contribution, but also has the correct ratio of its size to the size of the other items, as determined by its flexibility).
</li>
</ul>

<p>
例えば、
`~flex容器$を成す`~flex駒$は 1 個だけで, その駒の［
`flex-basis$p は `100px^v,
最大-内容~sizeは `200px^v
］であるとき、
`~flex容器$（および~flex駒）の幅は，
駒の `flex-grow$p に応じて
⇒
`0^v ならば `100px^v になるが、
`1^v 以上ならば `200px^v になる。
◎
For example, if a flex container has a single flex item with flex-basis: 100px; but a max-content size of 200px, then when the item is flex-grow: 0, the flex container (and flex item) is 100px wide, but when the item is flex-grow: 1 or higher, the flex container (and flex item) is 200px wide.
</p>

<p>
これらの 2 つの事例の挙動の合間を総じて連続的にするアリな仕方は，いくつかあるが、
どれも欠点がある。
ここでは，感じられる不良な含意ができるだけ少ないものを選んだが、
あいにく，~flex係数が 1 未満の事例では，~flex能を “二重-適用する” 。
上の例では、
駒の `flex-grow$p が `.5^v の場合，
`~flex容器$は `150px^v 幅になるが、
駒は通常に可用な空間の中に~sizeされ，
`125px^v 幅になる。
◎
There are several possible ways to make the overall behavior continuous between these two cases, but all of them have drawbacks. We chose one we feel has the least bad implications; unfortunately, it "double-applies" the flexibility in cases with flex factors that are &lt; 1. In the above example, if the item has flex-grow: .5, then the flex container ends up 150px wide, but the item then sizes normally into that available space, ending up 125px wide.
</p>

<details class="note">
<summary>
選ばれた特有な挙動について，さらに踏み込んだ注記
◎
Even more involved notes on the specific behavior chosen
</summary>

<p>
原則：
◎
Principles:
</p>
<ol>
	<li>
伸長しているか縮短しているかを問わず、
どの~sizeも，入力が 0 に近づくに伴い発散することはない。
◎
Don’t explode any sizes, whether growing or shrinking, as inputs approach zero.
</li>
	<li>
駒の~flex係数が すべて 1 以上のときは、［
どの駒も`最大-内容~size$以上になる
］ために必要yな最小な~sizeを返す。
◎
When flex factors are all &gt;=1, return the minimum size necessary for every item to be &gt;= max-content size.
</li>
	<li>
~flex係数 0 を伴う駒は、
【他の】~sizeにまったく影響しないべきである。
◎
Items with a zero flex shouldn’t affect the sizes at all.
</li>
	<li>
駒の［
~flex係数, ~size
］の変動に対し，連続的になることを保つ。
◎
Keep it continuous over variance of flex factors and item sizes.
</li>
	<li>
~sizingの変動は、
アリな限り，入力~変数（~size, ~flex係数）の変化に線形になることを保つ。
◎
Keep sizing variance as linear as possible with respect to linear changes to any input variable (size, flex factor).
</li>
	<li>
各~駒の~flex係数の総和が 1 を超えるときは、［
どの駒も`最大-内容~size$以上になる
］ために必要yな最小~sizeを返す。
◎
When the sum of flex factors is &gt;=1, return the minimum size necessary for every item to be &gt;= max-content size.
</li>
</ol>

<p>
これらすべてが同時に成り立つためには、［
ある駒の~flex係数,
行f上にある駒~すべての~flex係数の総和
］どちらかが 1 未満のときには，何らかの補正を適用する必要がある。
◎
To get these all to work together, we have to apply some correction when either flex factors or the sum of flex factors on a line is &lt; 1.
</p>

<p>
縮短-時【 %~flex量 が負な場合】の挙動は，いくぶん容易になる
— 駒の縮短-係数が 0 に近づいて発散する事例では、
結果の `欲される~flex割合分^i は負な無限大になり，
それが %選ばれた~flex割合分 を与えることは（常に最~大をとるので）決してないので、
補正は行f~levelで適用するだけで済み，二重-適用になるのは総和が 1 未満になるときに限られる。
◎
For shrink our behavior is somewhat easier; since the explosive case of 0 shrink results in a negative infinity desired fraction which we’ll never choose (since we always take the largest), we can just apply the correction at the line level, giving us double-application only when the sum is &lt; 1.
</p>

<p>
【 %~flex量 が】正な場合，もっと複雑になる。
伸長-係数が 0 に近づくに伴い，
`欲される~flex割合分^i は `正な^em無限大へ発散する
— それが %選ばれた~flex割合分 を与えるので、
個々の駒~levelで補正を適用する必要がある。
係数が 1 未満のときは、
空間を当の係数で乗算することにより，それを行う。
係数の総和が 1 以上の下では、
これは， 1 未満の係数を伴う駒に対し二重-適用になるが、
そのままだと，総和が 1 未満の下では三重-適用になる。
この馬鹿げた結果を避けるため、
総和 ~EQ 1 のときは，代わりに総和で除算することにより “逆” 補正を適用する。
これは、
1 未満の係数を伴う駒に対し，すべての事例で二重-補正までにとどめる。
◎
For positives it’s more complicated. 0 grow naively explodes into *positive* infinity, which we’d choose, so we need to apply the correction at the individual item level. We do that by multiplying the space by the factor when factor is &lt;1. Leaving it at that would result in a double-application for items &lt; 1 but sum &gt;= 1, but a *triple*-application when the sum is &lt; 1. To avoid *that* ridiculousness, we apply a *reverse* correction when the sum is 1, dividing by the sum instead. This leaves us with a double correction in all cases for items with factors &lt; 1.
</p>

<p>
二重-適用を，まるごと排することは、
他の，より重要な原則をあきらめない限りできない
（特に，原則 3
— 2 個の駒の `flex-grow^p が［
どちらも `.5^v のときは，二重-適用しないようにしつつ、
一方が `0^v で他方が `1^v のときは，前者に後者を超える力を与えない
］ような規則は，どうやってもできない。）
◎
We can’t eliminate the double-applications entirely without giving up other, more important principles (in particular, principle 3 —try to come up with rules that don’t double-apply when you have two items with flex-grow: .5, but also don’t give a flex-grow: 0 item any power over a flex-grow: 1 sibling; you can’t, as far as we can tell.)
</p>
</details>
</details>

				</section>
				<section id="intrinsic-main-sizes-compat">
<h5 title="Web-compatible Intrinsic Sizing Algorithm">9.9.1.2. ~Web互換な内在的~sizing~algo</h5>

<p class="note">注記：
次の~algoは、
~Web互換になるものとしてデモられる。
それは、
将来には，［
アリなら，上に与えた理想的な~algoに近くなる
］よう改められ得る。
◎
Note: The following algorithm has been demonstrated to be Web-compatible. It may be altered in the future to bring it closer to the ideal algorithm above, if possible.
</p>

<p class="issue">
ここに
~Web互換な~algoを要旨する。
[`課題 #8884＠~CSSissue/8884$]
◎
Outline Web-compatible algorithm here, once we have one. [Issue #8884]
</p>

				</section>
				<section id="intrinsic-main-sizes-multiline">
<h5 title="Multi-line Min-content Algorithm">9.9.1.3. 複-行f用の最小-内容~algo</h5>

<div>
<p>
`~flex容器$ %容器 は`複-行f$である場合、
%容器 の`主-軸$沿いの`最小-内容~size$は，次の結果になる：
</p>
<ol>
	<li>
%最大 ~LET 0
</li>
	<li>
<p>
%容器 内の
~EACH( `畳まれ$ていない`~flex駒$ %駒 )
に対し：
</p>
		<ol>
			<li>
%供与 ~LET %駒 の`最小-内容 供与$fX
</li>
			<li>
~IF［
%駒 は伸長-不能【すなわち，`~flex伸長-係数$ ~EQ 0 】
］
⇒
%供与 ~SET `min^op( %供与, %駒 の`~flex基底~size$ )
</li>
			<li>
~IF［
%駒 は縮短-不能【すなわち，`~flex縮短-係数$ ~EQ 0 】
］
⇒
%供与 ~SET `max^op( %供与, %駒 の`~flex基底~size$ )
</li>
			<li>
%供与 ~SET `max^op( `min^op( %供与, %駒 の`最大-主size$ ), %駒 の`最小-主size$ )
</li>
			<li>
%最大 ~SET `max^op( %最大, %供与 )
</li>
		</ol>
	</li>
	<li>
~RET %最大
</li>
</ol>
◎
For a multi-line container, the min-content main size is simply the largest min-content contribution of all the non-collapsed flex items in the flex container. For this purpose, each item’s contribution is capped by the item’s flex base size if the item is not growable, floored by the item’s flex base size if the item is not shrinkable, and then further clamped by the item’s min and max main sizes.
</div>

				</section>
			</section>
			<section id="intrinsic-cross-sizes">
<h4 title="Flex Container Intrinsic Cross Sizes">9.9.2. ~flex容器の内在的~交叉size</h4>

<p>
`~flex容器$ %容器 の`交叉-軸$沿いの［
`最小-内容~size$ %最小 ／`最大-内容~size$ %最大
］は：
◎
↓</p>

<ul class="switch">
	<li>
%容器 は`単-行f$である場合
⇒
［
%最小 ／ %最大
］は，
%容器 の各`~flex駒$の［
`最小-内容 供与$ ／ `最大-内容 供与$
］の最~大になる。
◎
The min-content/max-content cross size of a single-line flex container is the largest min-content contribution/max-content contribution (respectively) of its flex items.
</li>
	<li>
<p>
%容器 が`複-行f$である場合、
%容器 の~flow方向が［
~row, ~col
］どちらなのかに依存する
— `flex-direction$p に応じて：
◎
For a multi-line flex container, the behavior depends on whether it’s a row or column flexbox:
</p>
		<dl class="switch">
			<dt>
`row$v ／ `row-reverse$v
◎
row multi-line flex container cross-size
</dt>
			<dd>
［
%最小 ／ %最大
］は、
%容器 を`交叉-軸$沿いの［
`最小-内容 拘束$／`最大-内容 拘束$
］の下で~sizeして得られる，すべての`~flex行l$の`交叉size$の総和になる。
◎
The min-content/max-content cross size is the sum of the flex line cross sizes resulting from sizing the flex container under a cross-axis min-content constraint/max-content constraint (respectively).
</dd>

			<dt>
`column$v ／ `column-reverse$v
◎
column multi-line flex container cross-size
</dt>
			<dd>
<p>
%最小 は、
%容器 の［
すべての`~flex駒$の【`交叉-軸$沿いの】`最小-内容 供与$
］のうち最~大になる。
◎
The min-content cross size is the largest min-content contribution among all of its flex items.
</p>

<p class="note">注記：
この経験則は、
実質的に，~flex行lは 1 本しかないと見做す
— ［
%最小 ~LT %最大
］になることを保証するため。
%容器 の縦幅に拘束がある場合，~overflowし得るが、
%容器 が`~scroll容器$でもある場合，少なくとも［
所与の~col【すなわち，~flex行l】は、
どれも %容器 の`~scrollport$の中に収まる
］に十分な大きさにはなる。
◎
Note: This heuristic effectively assumes a single flex line, in order to guarantee that the min-content size is smaller than the max-content size. If the flex container has a height constraint, this will result in overflow, but if the flex container is also a scroll container, it will at least be large enough to fit any given column entirely within its scrollport.
</p>
			</dd>
			<dd>
<p>
%最大 は、
%容器 を`交叉-軸$沿いの`最大-内容 拘束$の下で~sizeした結果から得られる，すべての`~flex行l$の`交叉size$の総和になる
— ~layoutの間に，［
%容器 内のすべての`~flex駒$にわたる`交叉-軸$沿いの`最大-内容 供与$のうち，最~大
］を［
各`~flex駒$用の`交叉-軸$における`可用な空間$
］として利用して。
◎
The max-content cross size is the sum of the flex line cross sizes resulting from sizing the flex container under a cross-axis max-content constraint, using the largest max-content cross-size contribution among the flex items as the available space in the cross axis for each of the flex items during layout.
</p>

<p class="note">注記：
この経験則は、
%容器 のあるべき~sizeに対する適度な近似を与える
— ［
各`~flex駒$は，自身の`最大-内容 供与$以上の大きさに~lay-outされる
］かつ［
各`~flex行l$は、
それに属する最~大な`~flex駒$より大きくならない
］ような。
これは，一部の事例では完璧に収まるもの`ではない^emが、
完全に正しく行うのは ひどく高価であり，これでも適度にきちんと働く。
◎
Note: This heuristic gives a reasonable approximation of the size that the flex container should be, with each flex item laid out at its max-content contribution or larger, and each flex line no larger than its largest flex item. It’s not a perfect fit in some cases, but doing it completely correct is insanely expensive, and this works reasonably well.
</p>
			</dd>
		</dl>
	</li>
</ul>

			</section>
			<section id="intrinsic-item-contributions">
<h4 title="Flex Item Intrinsic Size Contributions">9.9.3. ~flex駒の内在的~size供与</h4>

<div class="p">
<p>
`~flex駒$ %駒 の`主size$に対する［
`最小-内容 供与$／`最大-内容 供与$
］は、
次に従って与えられる：
</p>
<ol>
	<li>
%~size ~LET ［
最小-…／最大-…
］に応じて， %駒 の`外縁$sz［
`最小-内容~size$ ／ `最大-内容~size$
］
</li>
	<li>
%選好d~size ~LET %駒 の`外縁$sz `選好d~size$
</li>
	<li>
~IF［
%選好d~size は `~autoS$v でない
］
⇒
%~size ~SET `max^op( %~size, %選好d~size )
</li>
	<li>
~RET `max^op( `min^op( %~size, %駒 の`最大-主size$ ), %駒 の`最小-主size$ )
</li>
</ol>

◎
The main-size min-content contribution of a flex item is the larger of its outer min-content size and outer preferred size if that is not auto, clamped by its min/max main size.
◎
The main-size max-content contribution of a flex item is the larger of its outer max-content size and outer preferred size if that is not auto, clamped by its min/max main size.
</div>

			</section>
		</section>
	</section>
	<section id="pagination">
<h2 title="Fragmenting Flex Layout">10. ~flex~layoutの断片化-法</h2>

<p>
~flex容器は、［
駒どうしの合間
］, あるいは［
（`複-行f$~mode下における）いくつかの駒からなる行fどうしの合間
］, あるいは［
駒の内側
］にて，何~pageかに渡って分断され得る。
各種 `break-*$p ~propは、
通常の［
`塊~level$／`行内~level$
］の~boxに対するときと同様に，
~flex容器にも適用される。
この節では、
それらが［
~flex駒とその内容
］にどう適用されるかを定義する。
より詳しい文脈は `CSS3-BREAK$r を見よ。
◎
Flex containers can break across pages between items, between lines of items (in multi-line mode), and inside items. The break-* properties apply to flex containers as normal for block-level or inline-level boxes. This section defines how they apply to flex items and the contents of flex items. See the CSS Fragmentation Module for more context [CSS3-BREAK].
</p>

<p>
以下の分断ng規則における “~page” とは、
`断片化~容器$を指す。
同じ規則は，他の`断片化~文脈$においても適用される
（必要に応じて， “~page” を適切な`断片化~容器$の種別に読み替える）。
可読性のため、
この節の用語
“~row”, “~col”
は、
`~flex容器$ 自身のそれではなく，［
`断片化~文脈$の`塊~flow方向$
］に相対的な~flex容器の方位を指すとする。
【 “~col” が塊~flow方向】
◎
The following breaking rules refer to the fragmentation container as the “page”. The same rules apply in any other fragmentation context. (Substitute “page” with the appropriate fragmentation container type as needed.) For readability, in this section the terms "row" and "column" refer to the relative orientation of the flex container with respect to the block flow direction of the fragmentation context, rather than to that of the flex container itself.
</p>

<p>
~flex容器が断片化されるときの正確な~layoutは、
この仕様のこの~levelでは定義されない。
しかしながら，~flex容器の内側における分断には、
次の規則が課される
（ `order$p により`改変された文書~順序$を利用して解釈する下で）：
◎
The exact layout of a fragmented flex container is not defined in this level of Flexible Box Layout. However, breaks inside a flex container are subject to the following rules (interpreted using order-modified document order):
</p>

<ul>
	<li>
<p>
~row~flex容器においては：
◎
In a row flex container,＼
</p>
		<ul>
			<li>
~flex駒~上の［
`break-before$p ／ `break-after$p
］値は，~flex行lに伝播する。
◎
the break-before and break-after values on flex items are propagated to the flex line.＼
</li>
			<li>
［
最初の行f上の `break-before$p 値 ／
最後の行f上の `break-after$p 値
］は、
~flex容器に伝播する。
◎
The break-before values on the first line and the break-after values on the last line are propagated to the flex container.
</li>
		</ul>

<p class="note">注記：
分断の伝播は、
`算出d値$には影響しない
（ `text-decoration$p の伝播の様に）。
◎
Note: Break propagation (like text-decoration propagation) does not affect computed values.
</p>
	</li>
	<li>
<p>
~col~flex容器においては：
◎
In a column flex container,＼
</p>
		<ul>
			<li>
［
最初の駒~上の`break-before$p 値 ／
最後の駒~上の`break-after$p 値
］は、
~flex容器に伝播する。
◎
the break-before values on the first item and the break-after values on the last item are propagated to the flex container.＼
</li>
			<li>
他の駒~上の強制d分断は、
その駒~自身に適用される。
◎
Forced breaks on other items are applied to the item itself.
</li>
		</ul>
	</li>
	<li>
~flex駒の内側の強制d分断は、
実質的に，その内容の~sizeを増大させる。
それは、
他の同胞~駒の内側に強制d分断を誘発することはない。
◎
A forced break inside a flex item effectively increases the size of its contents; it does not trigger a forced break inside sibling items.
</li>
	<li>
<p>
~row~flex容器においては：
◎
In a row flex container,＼
</p>
		<ul>
			<li>
同胞~flex行lたちの各~合間に，
`A類の分断~機会$が生じる。
◎
Class A break opportunities occur between sibling flex lines, and＼
</li>
			<li>
［［
最初／最後
］の~flex行l
］と［
~flex容器の内容~辺
］との合間に，
`C類の分断~機会$が生じる。
◎
Class C break opportunities occur between the first/last flex line and the flex container’s content edges.
</li>
		</ul>
	</li>
	<li>
<p>
~col~flex容器においては：
◎
In a column flex container,＼
</p>
		<ul>
			<li>
同胞~flex駒たちの各~合間に，
`A類の分断~機会$が生じる。
◎
Class A break opportunities occur between sibling flex items, and＼
</li>
			<li>
［
行f上の［
最初／最後
］の~flex駒
］と［
~flex容器の内容~辺
］との合間に
`C類の分断~機会$が生じる。
◎
Class C break opportunities occur between the first/last flex items on a line and the flex container’s content edges. [CSS3-BREAK]
</li>
		</ul>
<p>
`CSS3-BREAK$r
</p>
	</li>
	<li>
~flex容器が分断の後にも継続されるとき、
その`~flex駒$に`可用な空間$は（`断片化~文脈$の塊~flow方向においては），
それまでの各~page上の各~flex容器~断片に消費された空間により，節減される。
~flex容器~断片に消費される空間が、
当の~page上の その`内容~box$の~sizeになる。
この可用な空間の調整の結果が負になった場合、
それは 0 に設定される。
◎
When a flex container is continued after a break, the space available to its flex items (in the block flow direction of the fragmentation context) is reduced by the space consumed by flex container fragments on previous pages. The space consumed by a flex container fragment is the size of its content box on that page. If as a result of this adjustment the available space becomes negative, it is set to zero.
</li>
	<li>
~flex容器の最初の断片が~pageの上端に来ない, かつ
~page上の残りの空間に収まる~flex駒はない場合、
その断片~全体が次の~pageへ移動される。
◎
If the first fragment of the flex container is not at the top of the page, and none of its flex items fit in the remaining space on the page, the entire fragment is moved to the next page.
</li>
	<li>
`複-行f$な~col~flex容器を分断するときは、
~UAは，各~断片を自前の［
~flex行lたちが成す “堆積”
］の中へ組織化してもヨイ
— `複-~col容器$を成す各~断片が自前の［
`~col~box$たちが成す~row
］を有するのと同じ様に。
◎
When breaking a multi-line column flex container, the UA may organize each fragment into its own “stack” of flex lines—just like each fragment of a multi-column container has its own row of column boxes—in order to ensure that content presented on earlier pages corresponds to content earlier in the box order.
</li>
	<li>
以上により課される，駒たちの再配列とは別に、
~UAは，［
~flowの断片化による~flex容器の歪み
］を最小化するよう試みるべきである。
◎
Aside from the rearrangement of items imposed by the previous point, UAs should attempt to minimize distortion of the flex container with respect to unfragmented flow.
</li>
</ul>

		<section id="pagination-algo">
<h3 title="Sample Flex Fragmentation Algorithm">10.1. ~flex断片化~algoの見本</h3>

<p>
この参考節では、
~flex容器の断片化~algoとしてアリなものを示す。
実装者には、
この~algoを改良して，~CSS~WGへ`~feedbackを寄せられる＠#sotd$よう願う。
◎
This informative section presents a possible fragmentation algorithm for flex containers. Implementors are encouraged to improve on this algorithm and provide feedback to the CSS Working Group.
</p>

<div class="example">
<p class="note">注記：
この~algoは、
~page割りが常に順方向に進む（後戻りしない）ものと見做している。
したがって、
~page割りに~~先行する整列は，ほぼ無視される。
より高度な~layout~engineは、
複数の断片に渡る整列も尊守し得る。
◎
This algorithm assumes that pagination always proceeds only in the forward direction; therefore, in the algorithms below, alignment is mostly ignored prior to pagination. Advanced layout engines may be able to honor alignment across fragments.
</p>

<dl>
	<dt>
`単-行f$な~col~flex容器
◎
single-line column flex container
</dt>
	<dd>
		<ol>
			<li>
~flex~layout~algoを，`交叉sizeの決定$の所まで走らす（~page割りは~~考慮せずに）
◎
Run the flex layout algorithm (without regards to pagination) through Cross Sizing Determination.
</li>
			<li>
アリな限り多くの（ただし， 1 個以上, またはその断片の）連続する［
~flex駒 または駒~断片
］を，最初から順に［
~page上の部屋が尽きるか, 強制d分断に遭遇する
］まで，~lay-outする
◎
Lay out as many consecutive flex items or item fragments as possible (but at least one or a fragment thereof), starting from the first, until there is no more room on the page or a forced break is encountered.
</li>
			<li>
<p>
~IF［
前~段により部屋が尽きた
］~AND［
自由空間は正である
］
⇒
~UAは，次の分断-不能な［
駒／断片
］用の部屋を作るために，この~page上に分配される自由空間を節減してもヨイ（負にならない所まで）。
◎
If the previous step ran out of room and the free space is positive, the UA may reduce the distributed free space on this page (down to, but not past, zero) in order to make room for the next unbreakable flex item or fragment.＼
</p>

<p>
~ELSE
⇒
収まり切らない［
駒／断片
］は，次の~pageに押出される。
~UAは，
50% より多くの断片が残りの空間に収まる場合は引き上げ,
そうでなければ押出すべきである。
◎
Otherwise, the item or fragment that does not fit is pushed to the next page. The UA should pull up if more than 50% of the fragment would have fit in the remaining space and should push otherwise.
</p>
			</li>
			<li>
~IF［
これまでの手続きで~lay-outされなかった［
駒／断片
］が在る
］
⇒
~flex~layout~algoの［
`行f~sizeの決定$から`交叉sizeの決定$までの部分
］を，次の~pageの~sizeの下で［
（すでに~lay-outされたものも含めた）内容 `すべて^em
］により再び走らせた上で、
まだ~lay-outされていない最初の［
駒／断片
］から開始する下で前~段へ戻る。
◎
If there are any flex items or fragments not laid out by the previous steps, rerun the flex layout algorithm from Line Length Determination through Cross Sizing Determination with the next page’s size and all the contents (including those already laid out), and return to the previous step, but starting from the first item or fragment not already laid out.
</li>
			<li>
~flex容器~内の各~断片に対し、
~flex~layout~algoの［
`主-軸の整列$から その最後までの部分
］を継続する。
◎
For each fragment of the flex container, continue the flex layout algorithm from Main-Axis Alignment to its finish.
</li>
		</ol>

<p class="note">注記：
この~algoでは意図的に、
~col方向かつ`単-行f$な~flex容器が，塊~flowとごく似る様に~page割りしている。
その意図の~~元は、［
`justify-content:start$p にされ, かつ ~flex可能な駒を伴わない
］ような~flex容器による~page割りと，［
その~flex容器と同じ［
内容, 使用~size, 使用~margin
］を伴う，`~flow内$の子
］を有するような塊による~page割りが，一致するべきである所に由来する。
◎
It is the intent of this algorithm that column-direction single-line flex containers paginate very similarly to block flow. As a test of the intent, a flex container with justify-content:start and no flexible items should paginate identically to a block with in-flow children with same content, same used size and same used margins.
</p>
	</dd>

	<dt>
`複-行f$な~col~flex容器
◎
multi-line column flex container
</dt>
	<dd>
		<ol>
			<li>
~page割りを~~考慮した`上で^em
（~flex容器の最大~行f長さを~page上に残された空間に制限する下で）、
~flex~layout~algoの［
`交叉sizeの決定$の所
］までを走らす。
◎
Run the flex layout algorithm with regards to pagination (limiting the flex container’s maximum line length to the space left on the page) through Cross Sizing Determination.
</li>
			<li>
<p>
アリな限り多く（ただし， 1 本以上）の~flex行lを［
交叉-次元にて~flex容器の部屋が尽きるか, 強制d分断に遭遇する
］まで~lay-outする：
◎
Lay out as many flex lines as possible (but at least one) until there is no more room in the flex container in the cross dimension or a forced break is encountered:
</p>
				<ol>
					<li>
アリな限り多く（ただし， 1 つ以上）の連続する~flex駒を
最初のものから順に［
~page上の部屋が尽きるか, 強制d分断に遭遇する
］まで~lay-outする。
ただし，~flex駒の`中の^em強制d分断は無視する。
◎
Lay out as many consecutive flex items as possible (but at least one), starting from the first, until there is no more room on the page or a forced break is encountered. Forced breaks within flex items are ignored.
</li>
					<li>
~IF［
これが最初の~flex容器~断片である
］~AND［
この行fは ~page上に残された空間より大きい単独の~flex駒のみを包含する
］~AND［
この~flex容器はすでに~page先頭に来ているのではない
］
⇒
その~flex容器を次の~pageに移動した上で，~flex容器~layout全体を再開始する
◎
If this is the first flex container fragment, this line contains only a single flex item that is larger than the space left on the page, and the flex container is not at the top of the page already, move the flex container to the next page and restart flex container layout entirely.
</li>
					<li>
~IF［
最初の段にて~lay-outされていない~flex駒がある
］
⇒
~flex~layout~algoの［
`主sizeの決定$から`交叉sizeの決定$までの部分
］を，［
前の行f上に~lay-outされていない駒のみ
］を利用して再び走らせた上で、
まだ~lay-outされていない最初の駒から開始する下で，前~段へ戻る。
◎
If there are any flex items not laid out by the first step, rerun the flex layout algorithm from Main Sizing Determination through Cross Sizing Determination using only the items not laid out on a previous line, and return to the previous step, starting from the first item not already laid out.
</li>
				</ol>
			</li>
			<li>
~IF［
前~段で~lay-outされていない~flex駒が在る
］
⇒
次の~pageの~size, および まだ~lay-outされていない駒のみを利用して
~flex~layout~algoの［
`行f~sizeの決定$から`交叉sizeの決定$までの部分
］を再び走らせた上で、
まだ~lay-outされていない最初の駒から開始する下で，前~段へ戻る。
◎
If there are any flex items not laid out by the previous step, rerun the flex layout algorithm from Line Sizing Determination through Cross Sizing Determination with the next page’s size and only the items not already laid out, and return to the previous step, but starting from the first item not already laid out.
</li>
			<li>
~flex容器の各~断片に対し、
~flex~layout~algoの［
`主-軸の整列$から その最後までの部分
］を継続する。
◎
For each fragment of the flex container, continue the flex layout algorithm from Main-Axis Alignment to its finish.
</li>
</ol>

<p class="note">注記：
この見本~algoの短所は、
~flex駒は［
全体が 1 ~pageに収まり切らない場合には，
`複-行f$な~col~flex容器~内に~page割り`されなくなる^em
］ことにある。
◎
A shortcoming of this sample algorithm is that if a flex item does not entirely fit on a single page, it will not be paginated in multi-line column flex containers.
</p>
	</dd>

	<dt>
`単-行f$な~row~flex容器
◎
single-line row flex container
</dt>
	<dd>
		<ol>
			<li>
［
`flex-start$vA, `baseline$vA
］以外のどの `align-self$p 値も `flex-start$vA として扱う下で、
~flex~layout~algo全体を（~page割りは~~考慮せずに）走らす。
◎
Run the entire flex layout algorithm (without regards to pagination), except treat any align-self other than flex-start or baseline as flex-start.
</li>
			<li>
~IF［
分断-不能な駒が~page上に残された空間に収まり切らない
］~AND［
この~flex容器が~page先頭に来てはいない
］
⇒
その~flex容器を次の~pageへ移動した上で，~flex容器~layout全体を再開始する。
◎
If an unbreakable item doesn’t fit within the space left on the page, and the flex container is not at the top of the page, move the flex container to the next page and restart flex container layout entirely.
</li>
			<li>
<p>
各~駒に対し、
その内容を~page上に残された空間に収まる限り，~lay-outする。
残りの内容を次の~page上に断片化する
—
`すべての^em内容（前の~page上で完了した駒も含む）を利用して，
新たな~page~sizeの下で，
~flex~layout~algoの［
`行f~sizeの決定$から`主-軸の整列$までの部分
］を再び走らせた上で。
◎
For each item, lay out as much of its contents as will fit in the space left on the page, and fragment the remaining content onto the next page, rerunning the flex layout algorithm from Line Length Determination through Main-Axis Alignment into the new page size using all the contents (including items completed on previous pages).
</p>

<p class="note">注記：
それまでの断片たちの中に全体が収まる~flex駒は、
依然として，後方の断片たちにおける主-軸の空間を占める。
◎
Any flex items that fit entirely into previous fragments still take up space in the main axis in later fragments.
</li>
			<li>
~flex容器の各~断片に対し、
~flex~layout~algoの［
`交叉-軸の整列$から 最後までの部分
］を再び走らす。
最初のもの以外のすべての断片に対し
⇒
すべての駒~断片と行fに対し，［
`align-self$p, `align-content$p
］は `flex-start$vA として扱う
◎
For each fragment of the flex container, rerun the flex layout algorithm from Cross-Axis Alignment to its finish. For all fragments besides the first, treat align-self and align-content as being flex-start for all item fragments and lines.
</li>
			<li>
~IF［
駒を、
その元の `align-self$p 値に則って［［
すべての~flex容器~断片
］の`交叉size$の合計
］の中で整列したとするとき，［
単独の~flex容器~断片~内に全体が収まる
］ことになる
］
⇒
その駒を，その断片の中に~~移動して, 適切に整列してヨイ。
◎
If any item, when aligned according to its original align-self value into the combined cross size of all the flex container fragments, would fit entirely within a single flex container fragment, it may be shifted into that fragment and aligned appropriately.
</li>
		</ol>
	</dd>

	<dt>
`複-行f$な~row~flex容器
◎
multi-line row flex container
</dt>
	<dd>
		<ol>
			<li>
~flex~layout~algoの［
`交叉sizeの決定$の所
］までを（~page割りは~~考慮せずに）走らす。
◎
Run the flex layout algorithm (without regards to pagination), through Cross Sizing Determination.
</li>
			<li>
<p>
アリな限り多く（ただし， 1 本以上）の~flex行lを，
最初から順に，~page上の部屋が尽きるか, または 強制d分断に遭遇するまで，~lay-outする。
◎
Lay out as many flex lines as possible (but at least one), starting from the first, until there is no more room on the page or a forced break is encountered.
</p>

<p>
~IF［
行fは［
~pageに収まり切らない
］~AND［
~page先頭に来てはいない
］］
⇒
行fを次の~pageに移動させた上で、
それらの駒のみを利用して，この行fに後続するように
~flex~layout~algo全体を再開始する。
◎
If a line doesn’t fit on the page, and the line is not at the top of the page, move the line to the next page and restart the flex layout algorithm entirely, using only the items in and following this line.
</p>

<p>
~IF［
~flex駒それ自身が強制d分断を生じさせている
］
⇒
この行fと後続の行f上の駒のみを利用して, ［
`行fを分断する段＠#algo-line-break$にて自動的な分断により新たな行fを開始させた駒
］は利用せずに、
~flex~layout~algoの［
`主sizeの決定$から`主-軸の整列$までの部分
］を再び走らせた上で，この段を継続する。
~flex駒 `内の^em強制d分断は無視される。
◎
If a flex item itself causes a forced break, rerun the flex layout algorithm from Main Sizing Determination through Main-Axis Alignment, using only the items on this and following lines, but with the item causing the break automatically starting a new line in the line breaking step, then continue with this step. Forced breaks within flex items are ignored.
</li>
			<li>
~IF［
前~段により~lay-outされなかった~flex駒がある
］
⇒
次の~pageの~sizeおよび
まだ~lay-outされていない駒のみを利用して、
~flex~layout~algoの［
`行f~sizeの決定$から`主-軸の整列$までの部分
］を再び走らせた上で，まだ~lay-outされていない最初の行fから開始する下で，前~段へ戻る。
◎
If there are any flex items not laid out by the previous step, rerun the flex layout algorithm from Line Length Determination through Main-Axis Alignment with the next page’s size and only the items not already laid out. Return to the previous step, but starting from the first line not already laid out.
</li>
			<li>
~flex容器の各~断片に対し、
~flex~layout~algoの［
`交叉-軸の整列$から その最後までの部分
］を継続する。
◎
For each fragment of the flex container, continue the flex layout algorithm from Cross Axis Alignment to its finish.
</li>
		</ol>
	</dd>
</dl>
</div>

		</section>
	</section>
	<section id="axis-mapping">
<h2 title="Appendix A: Axis Mappings">付録 A. 各~軸の対応関係</h2>

◎非規範的

<p>
以下に現れる `(no)wrap^v は、［
`wrap$v または `nowrap$v
］の略記である。
</p>

<div style="overflow: auto;">
<table class="matrix axis-mapping" id="axis-mapping-table-en">
<caption>
［
`ltr$v + `horizontal-tb$v
］`書字~mode$（例： 英語）における各~軸の対応関係
◎
Axis Mappings for ltr + horizontal-tbWriting Mode (e.g. English)
</caption>
<colgroup span="1"></colgroup>
<colgroup span="3"></colgroup>
<colgroup span="3"></colgroup>
<thead>
<tr><th>`flex-flow$p
<th>`主-軸$
<th>`始端$
<th>`終端$
<th>`交叉-軸$
<th>`始端$
<th>`終端$
<tbody>

<tr><th>`row$v + `(no)wrap^v
<td rowspan="4">横
<td>左端
<td>右端
<td rowspan="4">縦
<td rowspan="2">上端
<td rowspan="2">下端

<tr><th>`row-reverse$v + `(no)wrap^v
<td>右端
<td>左端

<tr><th>`row$v + `wrap-reverse$v
<td>左端
<td>右端
<td rowspan="2">下端
<td rowspan="2">上端

<tr><th>`row-reverse$v + `wrap-reverse$v
<td>右端
<td>左端

<tr><th>`column$v + `(no)wrap^v
<td rowspan="4">縦
<td>上端
<td>下端
<td rowspan="4">横
<td rowspan="2">左端
<td rowspan="2">右端

<tr><th>`column-reverse$v + `(no)wrap^v
<td>下端
<td>上端

<tr><th>`column$v + `wrap-reverse$v
<td>上端
<td>下端
<td rowspan="2">右端
<td rowspan="2">左端

<tr><th>`column-reverse$v + `wrap-reverse$v
<td>下端
<td>上端
</table>

<table class="matrix axis-mapping" id="axis-mapping-table-fa">
<caption>
［
`rtl$v + `horizontal-tb$v 
］`書字~mode$（例： ~Farsi）における各~軸の対応関係
◎
Axis Mappings for rtl + horizontal-tbWriting Mode (e.g. Farsi)
</caption>
<colgroup span="1"></colgroup>
<colgroup span="3"></colgroup>
<colgroup span="3"></colgroup>
<thead>
<tr><th>`flex-flow$p
<th>`主-軸$
<th>`主-始端$
<th>`主-終端$
<th>`交叉-軸$
<th>`交叉-始端$
<th>`交叉-終端$
<tbody>

<tr><th>`row$v + `(no)wrap^v
<td rowspan="4">横
<td>右端
<td>左端
<td rowspan="4">縦
<td rowspan="2">上端
<td rowspan="2">下端

<tr><th>`row-reverse$v + `(no)wrap^v
<td>左端
<td>右端

<tr><th>`row$v + `wrap-reverse$v
<td>右端
<td>左端
<td rowspan="2">下端
<td rowspan="2">上端

<tr><th>`row-reverse$v + `wrap-reverse$v
<td>左端
<td>右端

<tr><th>`column$v + `(no)wrap^v
<td rowspan="4">縦
<td>上端
<td>下端
<td rowspan="4">横
<td rowspan="2">右端
<td rowspan="2">左端

<tr><th>`column-reverse$v + `(no)wrap^v
<td>下端
<td>上端

<tr><th>`column$v + `wrap-reverse$v
<td>上端
<td>下端
<td rowspan="2">左端
<td rowspan="2">右端

<tr><th>`column-reverse$v + `wrap-reverse$v
<td>下端
<td>上端
</table>

<table class="matrix axis-mapping" id="axis-mapping-table-ja">
<caption>
［
`ltr$v + `vertical-rl$v
］`書字~mode$（例： 日本語）における各~軸の対応関係
◎
Axis Mappings for ltr + vertical-rlWriting Mode (e.g. Japanese)
</caption>
<colgroup span="1"></colgroup>
<colgroup span="3"></colgroup>
<colgroup span="3"></colgroup>
<thead>
<tr><th>`flex-flow$p
<th>`主-軸$
<th>`始端$
<th>`終端$
<th>`交叉-軸$
<th>`始端$
<th>`終端$
<tbody>

<tr><th>`row$v + `(no)wrap^v
<td rowspan="4">縦
<td>上端
<td>下端
<td rowspan="4">横
<td rowspan="2">右端
<td rowspan="2">左端

<tr><th>`row-reverse$v + `(no)wrap^v
<td>下端
<td>上端

<tr><th>`row$v + `wrap-reverse$v
<td>上端
<td>下端
<td rowspan="2">左端
<td rowspan="2">右端

<tr><th>`row-reverse$v + `wrap-reverse$v
<td>下端
<td>上端

<tr><th>`column$v + `(no)wrap^v
<td rowspan="4">縦
<td>右端
<td>左端
<td rowspan="4">横
<td rowspan="2">上端
<td rowspan="2">下端

<tr><th>`column-reverse$v + `(no)wrap^v
<td>左端
<td>右端

<tr><th>`column$v + `wrap-reverse$v
<td>右端
<td>左端
<td rowspan="2">下端
<td rowspan="2">上端

<tr><th>`column-reverse$v + `wrap-reverse$v
<td>左端
<td>右端
</table>
</div>

	</section>
	<section id="webkit-aliases">
<h2 title="-webkit- Legacy Properties">付録 B. 旧来の `-webkit-*^p ~prop</h2>

<p>
`この付録は規範的である。^em
◎
This appendix is normative.
</p>

<p class="advisement">
<strong>
これらの別名は`非推奨にされた^emので、
作者は利用する`ベキでない^em
</strong>
— 自身の内容が活動的に利用されている旧来の~UAを~supportする必要がある場合を除き。
◎
These aliases are deprecated and authors should not use them unless their content needs to support actively-used legacy UAs.
</p>

<p>
一般的~Web内容との互換性を得るため、［
~web~browser／他の~UA
］は，次に挙げる`旧来の別名n$を［
実装するモノトスル／実装してもヨイ
］：
◎
For compatibility with general Web content, UAs that are Web browsers must and other UAs may implement the following legacy name aliases:
</p>

<table><thead>
<tr><th>別名
<th>標準
<tbody>

<tr><td>`-webkit-align-content^p
<td>`align-content$p

<tr><td>`-webkit-align-items^p
<td>`align-items$p

<tr><td>`-webkit-align-self^p
<td>`align-self$p

<tr><td>`-webkit-flex^p
<td>`flex$p

<tr><td>`-webkit-flex-basis^p
<td>`flex-basis$p

<tr><td>`-webkit-flex-direction^p
<td>`flex-direction$p

<tr><td>`-webkit-flex-flow^p
<td>`flex-flow$p

<tr><td>`-webkit-flex-grow^p
<td>`flex-grow$p

<tr><td>`-webkit-flex-shrink^p
<td>`flex-shrink$p

<tr><td>`-webkit-flex-wrap^p
<td>`flex-wrap$p

<tr><td>`-webkit-justify-content^p
<td>`justify-content$p

<tr><td>`-webkit-order^p
<td>`order$p
</table>

	</section>
	<section id="acknowledgments">
<h2 title="Acknowledgments">謝辞</h2>

<p>
次の方々からの~feedbackと貢献に謝意を：
◎
Thanks for feedback and contributions to
</p>

<p lang="en">
Erik Anderson,
Christian Biesinger,
Tony Chang,
Phil Cupp,
Arron Eicholz,
James Elmore,
Andrew Fedoniouk,
Brian Heuston,
Shinichiro Hamaji,
Daniel Holbert,
Ben Horst,
John Jansen,
Brad Kemper,
Kang-hao Lu,
Markus Mielke,
Peter Moulder,
Robert O’Callahan,
Christoph Päper,
Ning Rogers,
Peter Salas,
Elliott Sprehn,
Morten Stenshorne,
Christian Stockwell,
Ojan Vafai,
Eugene Veselov,
Greg Whitworth,
Boris Zbarsky.
</p>

	</section>
	<section id="changes">
<h2 title="Changes">変更点</h2>

<p class="trans-note">【
この節の内容は未訳。
】</p>

	</section>
	<section id="priv-sec">
<h2 title="Privacy and Security Considerations">~privacy／~securityの考慮点</h2>

<p>
この仕様【！Flexbox】により、
新たな~privacy漏洩や［
“正しく実装すること” を超えるような~securityの考慮点
］が導入されることはない。
◎
Flexbox introduces no new privacy leaks, or security considerations beyond "implement it correctly".
</p>

	</section>
</main></div>