Warning:
This wiki has been archived and is now read-only.
Css3-flexbox/zh-hant
Contents
介紹
伸縮布局模型
本規範稱 ‘display:flex’ 或 ‘display:inline-flex’ 的元素為伸縮容器，伸縮容器的子元素為伸縮項目，這些子元素使用伸縮布局模型。
與一般偏向於垂直配置的塊布局不同，也與一般偏向於水平配置的行內布局不同，伸縮布局演算法對於伸縮容器布局的方向是中立的。為了讓用廣義的方式描述伸縮布局變得容易，我們在此定義幾個方向中立的術語，讓規範的後面部份更好讀也更好懂。
圖 2. 幾個本規範用的方向與長度術語的示意圖，分別是 ‘row’ 與 ‘column’ 的伸縮容器。
使用者代理沿著一個伸縮容器的主軸配置伸縮項目，伸縮項目的排序從伸縮容器的主始邊開始，往主結邊結束。伸縮項目的在主軸方向的長或寬就是項目的主長度，伸縮項目的主長度屬性是 ‘width’ 或 ‘height’ 屬性，由哪一個在主軸方向決定。
與主軸垂直的軸稱作側軸，同理也定義側始邊與側結邊。伸縮項目的在側軸方向的長或寬就是項目的側長度，同樣地，側長度屬性是在側軸的 ‘width’ 或 ‘height’。
網頁作者可以由幾個方便的屬性操作伸縮容器的內容，其中最重要的是：用 ‘flex’ 屬性可以讓伸縮項目「伸縮」其主長度。「伸縮」根據頁面的可用空間讓項目變大或變小。若所有的伸縮項目完成伸縮之後在伸縮容器裡還有剩餘的空間，則網頁作者可以用 ‘justify-content’ 對齊、至中、配置項目。網頁作者也可以用 ‘order’ 屬性重新排列伸縮容器內的伸縮項目。
在側軸的方向，網頁作者可以讓伸縮項目「伸展」以填滿可用空間或以 ‘align-items’ 在空間中對齊伸縮項目。若伸縮容器為多行伸縮容器，使用者代理沿著側結方向加新的伸縮行，而網頁作者可以用 ‘align-content’ 屬性在伸縮容器裡對齊、置中、散佈這些伸縮行。
伸縮容器 ― ‘display’ 值 ‘flex’ 與 ‘inline-flex’
| 名稱： | display |
| 新值： | flex | inline-flex |
一個 ‘display’ 的計算值是 ‘flex’ 或 ‘inline-flex’ 的元素是一個伸縮容器，伸縮容器會為其內容建立新的伸縮格式化上下文。這類似於塊格式化上下文根元素 ― 浮動不會闖入伸縮容器，且伸縮容器的邊界不與其內容的邊界折疊。另外，每一個伸縮項目為其內容見立新的塊格式化上下文。
擁有 ‘flex’ 值的伸縮容器是一個塊級元素。擁有 ‘inline-flex’ 值的伸縮容器是一個原子行級元素。
伸縮容器不是塊容器，因此有些設計用來控制塊布局的屬性在伸縮布局中不適用。特別是：
- 多欄模組的所有 ‘
column-*’ 屬性在伸縮容器上沒有作用。 - ‘
float’ 與 ‘clear’ 在伸縮項目上沒有作用Error creating thumbnail: Unable to save thumbnail to destination。 - ‘
vertical-align’ 對於一個伸縮項目在伸縮容器裡如何對齊沒有影響。
若元素 ‘display’ 的指定值是 ‘inline-flex’ 且元素是一個浮動或絕對定位元素，則 ‘display’ 的計算值是 ‘flex’。也就是 CSS 2.1 章節 9.7 的表格增修「指定值」是 ‘inline-flex’、「計算值」是 ‘flex’ 的一行。
一個伸縮容器的基線為：
- 若任一個在伸縮容器第一行（經過 ‘
order’ 重新排序之後） 的伸縮項目 ‘align-self’ 的計算值是 ‘baseline’，則伸縮容器的基線是那些伸縮項目的基線。 - 否則，若伸縮容器有一個以上的伸縮項目，且第一個伸縮項目（經過 ‘
order’ 重新排序之後）的基線與伸縮容器的主軸平行，則伸縮容器的基線是其第一個伸縮項目的基線。 - 否則，伸縮容器的基線是其內容盒的「後」端。
伸縮項目
伸縮布局演算法是操作伸縮項目的演算法。伸縮容器的每一個子元素（除了需要盒修復的元素之外）display: none’。
有些 ‘display’ 會觸發無名盒的生成，舉例來說，使用者代理會在單獨的 ‘table-cell’ 盒table’ 與 ‘table-row’ 元素。這種修復必須在伸縮容器的子元素變成伸縮項目「之前」發生 ― 舉例來說，若有兩個相鄰的 ‘display: table-cell’ 子元素，兩個元素周圍的無名表格包裹盒會變成伸縮項目。
使用者代理必須使用 CSS 2.1 章節 9.7 的表格計算將作為伸縮項目的元素的 ‘display’ 值。CSS 工作組預計會在未來的規範裡引入伸縮容器的新的 ‘display’ 值，以取代這條敘述。
伸縮項目範例：
<div style="display: flex">
<!-- 伸縮項目：塊級子元素 -->
<div id="item1">塊</div>
<!-- 流外元素不是一個伸縮項目 -->
<!-- 然而，留下來的佔位符是伸縮項目 -->
<div id="not-an-item-A" style="position: absolute;">塊</div>
<!-- 伸縮項目：塊級元素 -->
<div id="item3" style="display: table">表格</div>
<!-- 伸縮項目：包著表格單元的無名表格 -->
<div id="item4" style="display: table-cell">表格單元</div>
<!-- 伸縮項目：包著行內內容的無名塊盒 -->
無名項目 5
<!-- 伸縮項目：塊級子元素 -->
<div id="item6">塊</div>
<!-- 兩個伸縮項目：文字周圍有無名伸縮項目，<span> 本身是另一個伸縮項目 -->
項目 7
<span>
項目 8
<div id="not-an-item-B">項目 8</div>
項目 8
</span>
<!-- 伸縮項目：塊級置換元素 -->
<iframe id="item9" style="display: block"></iframe>
<!-- 伸縮項目：行內級置換元素 -->
<img id="item10">
<!-- 伸縮項目：原子行內級元素 -->
<button id="item11">按鈕</button>
<!-- 伸縮項目：行內表格 -->
<div id="item12" style="display: inline-table">表格</div>
<!-- 伸縮項目：浮動的行內盒變成塊 -->
<span id="item13" style="float: left;">span</span>
</div>
因為塊元素 "not-an-item-A" 為絕對定位的流外元素，不是伸縮項目display:ruby’）或攪動盒樹（‘display:run-in’）的顯示型態造成的變化在決定伸縮項目之前發生。伸縮項目的邊界
流外項目
伸縮盒的絕對定位子元素不是伸縮盒項目，但是這些子元素在原本盒子樹的常規位置留下了「佔位符」。這些佔位符是寬高皆為 ‘0px’ 的無名行內盒而伸縮盒布局演算法適用於這些佔位符。具體來說，這些佔位符會觸發無名伸縮盒項目包裹盒的產生，或是成為相鄰行內盒伸縮盒絕對定位子元素的「靜止位置」（當 ‘top’ /‘right’/‘bottom’/‘left’ 屬性為 ‘auto’ 時的位置）是對應的佔位符在使用者代理進行伸縮盒布局之後的最後位置。
flex-pack:justify’ 的時候則是例外，在這種情況下無名伸縮盒項目會產生兩個間隔空間（沒有這個無名項目的話只有一個），會造成兩個「真的」項目中間有兩倍寬的間隔。已折疊項目
伸縮項目的預設最小長度
排序與方向
伸縮容器的內容可以用任何方向與任何順序進行布局，這讓網頁作者輕鬆地達到之前需要複雜、不牢靠的 ‘float’ 與 ‘clear’ 屬性才可以實現的效果。這個功能透過 ‘flex-direction’、‘flex-wrap’ 與 ‘order’ 屬性呈現。
伸縮流的方向 ― ‘flex-direction’ 屬性
| 名称： | flex-direction |
| 取值： | row | row-reverse | column | column-reverse |
| 初始： | row |
| 适用于： | 伸縮容器 |
| 继承： | 否 |
| 百分比： | （不適用） |
| 媒介： | 視覺 |
| 计算值： | 同指定值 |
| 动画： | 否 |
‘flex-direction’ 屬性可以用來設定伸縮容器的主軸的方向，這也決定了使用者代理配置伸縮項目的方向。
‘row’
‘row-reverse’
‘column’
‘column-reverse’
伸縮行換行 ― ‘flex-wrap’ 屬性
| 名称： | flex-wrap |
| 取值： | nowrap | wrap | wrap-reverse |
| 初始： | nowrap |
| 适用于： | 伸縮容器 |
| 继承： | 否 |
| 百分比： | （不適用） |
| 媒介： | 視覺 |
| 计算值： | 同指定值 |
| 动画： | 否 |
‘flex-wrap’ 屬性控制伸縮容器是單行還是多行與側軸方向，以決定新的一行堆放的方向。
‘nowrap’
‘wrap’
‘wrap-reverse’
伸縮方向與換行 ― ‘flex-flow’ 縮寫
| 名称： | flex-wrap |
| 取值： | <'flex-direction'> || <'flex-wrap'> |
| 初始： | 參見各屬性 |
| 适用于： | 伸縮容器 |
| 继承： | 參見各屬性 |
| 百分比： | （不適用） |
| 媒介： | 視覺 |
| 计算值： | 參見各屬性 |
| 动画： | 否 |
‘flex-flow’ 屬性是同時設定 ‘flex-direction’ 與 ‘flex-wrap’ 屬性的縮寫。
一些合法伸縮流的例子：
顯示順序 ― ‘order’ 屬性
預設狀態下，使用者代理會用伸縮項目出現在來源文件的次序配置這些伸縮項目。‘order’ 屬性可以用來改變這個順序。
| 名称： | order |
| 取值： | <number> |
| 初始： | 0 |
| 适用于： | 所有元素 |
| 继承： | 否 |
| 百分比： | （不適用） |
| 媒介： | 視覺 |
| 计算值： | 同指定值 |
| 动画： | 是 |
‘order’ 屬性透過將元素分到有序號的組以控制元素出現的順序。在伸縮布局中，‘order’ 屬性控制伸縮項目在伸縮容器裡的順序。
伸縮容器會從序號最小的組開始布局，在同一個組裡的項目依在來源文件裡的次序布局，這也影響了著畫次序 [CSS21]，正如同在文件中元素已經改變次序一般。
‘order’ 屬性必不可影響非視覺媒介（像是語音）裡的次序。這讓網頁作者可以用具有邏輯次序的內容滿足線性呈現內容的非視覺媒介與非 CSS 使用者代理，同時用 ‘order’ 重新排列內容的視覺順序。
除非有別的規範說明，本屬性在不是伸縮項目的元素上沒有效果。
下圖顯示了一個使用中的模板總是在最前面的簡單標籤介面：
這可以由以下 CSS 實作（僅顯示部份相關程式碼）：
.tabs {
display: flex;
}
.tabs > .current {
order: -1; /* 比喻設值 0 要小 */
}
很多 Web 頁面在 HTML 裡有很相似的構造，在上面有一個標題，下面一個註解，一個內容區塊跟一個或兩個在中間的額外欄位。一般來說，內容出現在頁面原始碼的前面（在額外的欄位之前）比較好。然而，這讓很多一般的設計很難達成，像是把欄位擺在內容區塊的兩邊。多年以來這種俗稱「聖杯布局」的兩個額外欄位的布局已經有很多種方法完成了，然而 ‘order’ 讓這種布局輕而易舉。以下面的頁面程式碼草圖與預期布局為例：
這種布局可以很簡單地由伸縮布局達成：
#main { display: flex; }
#main > article { flex:1; order: 2; }
#main > nav { width: 200px; order: 1; }
#main > aside { width: 200px; order: 3; }
更棒的是，預設下這些欄位是等高的，而且主要內容會根據螢幕大小盡可能寬。另外，也可以跟媒體查詢結合，在窄螢幕的狀況下使用垂直布局：
@media all and (max-width: 600px) {
/* 要放三個欄位太窄了 */
#main { flex-flow: column; }
#main > article, #main > nav, #main > aside {
/* 回到文件順序 */
order: 0; width: auto;
}
}
（用多行伸縮容器實現智慧換行就當作是給讀者的習題。）order’ 有類似的效果。伸縮行
伸縮性
‘flex’ 縮寫
| 名称： | flex |
| 取值： | none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] |
| 初始： | 參見各屬性 |
| 适用于： | 伸縮項目 |
| 继承： | 參見各屬性 |
| 百分比： | （不適用） |
| 媒介： | 視覺 |
| 计算值： | 參見各屬性 |
| 动画： | 參見各屬性 |
‘flex’ 屬性指定可伸縮長度的部件：擴展比率和收縮比率，以及伸縮基準值。當一個元素是伸縮項目時，‘flex’ 屬性將用於決定元素的主長度，代替其主長度屬性。如果元素不是伸縮盒項目，則 ‘flex’ 屬性無效。
<'flex-basis'> 組件用於設置伸縮基準值，為根據可伸縮比率計算出剩餘空間的分布之前伸縮項目主長度的起始數值。如果該值被省略，則其伸縮基準值默認為 ‘0%’ 。注意該值與伸縮基準值的初始值不同，其初始值為 ‘auto’。當 <'flex-basis'> 的值為零時，網頁作者必須指定一個單位。無單位的 0 值不是會被解析為一個可伸縮比率，就會導致該聲明無效。
<'flex-grow'> 和 <'flex-shrink'> 組件設置擴展比率和收縮比率，作為伸縮容器分配剩餘空間時，相較於其它伸縮項目可擴展或收縮的尺度。如果該值被省略，其值被設置為 ‘1’。注意該值與 ‘flex-grow’ 的初始值不同，其初始值為 ‘0’。
‘flex’ 屬性的常見值
本小節不具有規範性。
下表總結了 ‘flex’ 屬性常見值的效果：
‘flex: initial’
flex: 0 1 auto’ 相同。該值根據 ‘width’/‘height’ 屬性設置元素的尺寸，當剩餘空間為正值時，元素無法伸縮，但當空間不足時，元素可收縮至其最小值（如果用作伸縮基準值的 ‘width’/‘height’ 屬性值為 ‘auto’，則會根據其內容來決定元素尺寸）。對齊相關的屬性以及 ‘auto’ 邊界可用於控制伸縮容器中伸縮項目的對齊。‘flex: auto’
flex: 1 1 auto’ 相同。該值使元素可伸縮，並根據 ‘width’/‘height’ 屬性設置其伸縮基準值。如果所有項目均屬於 ‘flex: auto’ 或 ‘flex: none’，則在項目尺寸決定後，剩餘空間會被平分給 ‘flex: auto’ 的項目。‘flex: none’
flex: 0 0 auto’ 相同。該值使元素不可伸縮，並根據 ‘width’/‘height’ 屬性決定其尺寸。網頁作者可以將所有項目設置為 ‘flex: none’ 並使用 ‘auto’ 邊界或使用對齊相關屬性，讓元素以一般演算法決定尺寸但是使用可伸縮佈局的對齊功能。其效果與 ‘initial’ 類似，但即使在空間溢出的情況下，伸縮項目也不能收縮。‘flex: <正數>’
flex: <正數> 1 0%’ 相同。該值使元素可伸縮，並將伸縮基準值設置為零，導致該項目會根據設置的比率佔用伸縮容器的剩餘空間。如果一個伸縮容器里的所有項目都使用此模式，則它們的尺寸會根據可伸縮比率進行設置。可伸縮性允許元素依可用空間的多寡伸縮，同時可以選擇地根據其內容來決定大小：
<!DOCTYPE html>
<style>
div { display:flex; outline:1px solid silver; }
p { flex:auto; margin:1em; background:gold; }
</style>
<div>
<p>"flexing"</p>
<p>allows the items to get bigger</p>
<p>or</p>
<p>smaller</p>
</div>
在此例中，四個段落的伸縮基準值均是他們包含的文字的長度。而因為它們的擴展比率均被設置為 ‘1’，剩下的空間（從可伸縮盒容器的寬度中減去四個段落的伸縮基準值以及邊距）將被平分給四個段落。這顯示了當伸縮基準值不同時，擁有相同的可伸縮性的元素，最終依舊可能有不同的尺寸。
在默認情況下，可伸縮盒項目不會收縮至比它們的最小內容尺寸（其中最長的單詞或固定尺寸子元素的長度）更小。如果需要改變這一行為，可設置 ‘min-width’ 或 ‘min-height’ 屬性。
對齊
伸縮布局演算法
本章節涵蓋了具有規範性的演算法，詳述伸縮容器與其內容布局的準確行為。演算法以容易閱讀的方式呈現，並不一定是最有效率的演算法。使用者代理可使用任何想用的演算法，但是產生結果必須與這裡的演算法一致。
在以下演算法中，明確尺寸是指不需要靠測量內容決定的大小：例：<length>、初始包含塊的大小、一個靠明確尺寸決定的 <percentage>。不明確尺寸是指不明確的大小。
以下各小節描述了布局一個伸縮容器與其內容的演算法。
起始設定
- 生成無名伸縮項目：依《伸縮項目》小節的描述。
- 根據 ‘
order’ 重新排序伸縮項目。有最小（負值最大）‘order’ 的伸縮項目排在第一個。若有多個項目有相同的 ‘order’ 值，這些項目照文件順序排。這個步驟影響了伸縮項目生盒樹成的盒子的順序，也影響了後面的演算法如何處理各項目。
決定一行長度
- 決定伸縮項目可用的主、側空間。對於主、側兩個方向，若伸縮容器的在那個方向具有明確尺寸，使用該長度。否則，從該方向中伸縮容器的可用空間中減去邊界、邊框與邊距並使用該值。這個結果可能是無限大。
決定各項目的「伸縮基準長度」與「假定主長度」：
- 若項目具有明確伸縮基準值，該值為伸縮基準長度。
- 否則，若伸縮容器的主軸與項目的行內軸平行，使用可用空間與項目的伸縮基準值，除非項目的書寫模式與伸縮容器的書寫模式垂直（在這種情況下使用垂直流中的盒的規則 [CSS3-WRITING-MODES]），將伸縮基準值的 ‘
auto’ 視為是 ‘max-content’ 。若伸縮基準直是 ‘fill-available’ 或 ‘fit-content’，且伸縮容器的主長度以 ‘min-content’ 或 ‘max-content’ 限制決定大小，則也使用該限制決定項目的長度。伸縮基準長度為項目的 measure。 - 否則，使用可用空間與項目的伸縮基準值（若項目不可伸縮）或 ‘
auto’ ，除非項目的書寫模式與伸縮容器的書寫模式垂直（在這種情況下使用垂直流中的盒的規則 [CSS3-WRITING-MODES]），將伸縮基準值的 ‘auto’ 視為是 ‘max-content’ 。若伸縮基準直是 ‘auto’ 、‘fill-available’ 或 ‘fit-content’，且伸縮容器的側長度以 ‘min-content’ 或 ‘max-content’ 限制決定大小，則也使用該限制決定項目的長度。伸縮基準長度為項目的 max-content extent。 - 項目的伸縮基準長度截至其最大、最小值（透過主長度屬性）即為假定主長度。
- 決定伸縮容器的主長度：使用其主長度屬性。在本計算中，伸縮容器的最小內容主長度是所有伸縮容器裡伸縮項目的「最小內容長度貢獻」的最大值，伸縮容器的最大內容主長度是所有伸縮容器裡伸縮項目的「最大內容長度貢獻」的和。一個項目的「最小／最大內容長度貢獻」是當項目以 ‘
min-content’ 或 ‘max-content’ 限制決定大小時，項目的外-假定主長度。在這個計算中，使用者代理會將 ‘auto’ 邊界視為 ‘0’。
決定主長度
- 蒐集伸縮項目成伸縮行：
- 若伸縮容器為單行，則蒐集所有彈性項目至單個伸縮行。
- 否則，從第一個未蒐集進來的項目開始，蒐集盡可能多的連續伸縮項目直到伸縮容器的內主長度不夠或遇見強迫中斷（不過至少蒐集一個）進一個伸縮行。CSS2.1 ‘
page-break-before/after’ [CSS21] 或 CSS3 ‘break-before/after’ [CSS3-BREAK] 屬性設有分段中斷時，使用者代理會強迫中斷點的發生。
在本步驟中，伸縮項目的長度是外-假定主長度。
重複直到收集了所有伸縮項目。
注：除非主長度為零的項目在伸縮容器的開頭，這些項目不可能是一個行開頭。儘管前一行的最後一個非零項目已經「填滿」了前一行，「盡可能收集」會把主長度為零的項目蒐集進前一行的尾端。 - 決定可伸縮長度：決定所有伸縮項目的可伸縮長度以找到項目主長度的使用值，並由伸縮項目的主長度決定其「假定側長度」。
決定側長度
計算各伸縮行的側長度。
若伸縮容器僅有單一行（儘管容器是多行伸縮容器），則伸縮行的側長度是伸縮容器的內-側長度。
否則，對於各伸縮行：
- 蒐集所有行內軸與主軸平行，且 ‘
align-self’ 是 ‘baseline’，且側軸的邊界都不為 ‘auto’。找出項目基線與假定外-側始邊的最大距離，找出項目基線與假定外-側結邊的最大距離，並將兩個值相加。 - 在所有沒被前一個步驟蒐集的項目中，找出最大的外-假定側長度。
- 伸縮行側長度的使用值事前兩步驟找到的值中較大的那一個。
- 蒐集所有行內軸與主軸平行，且 ‘
- 處理 ‘
align-content: stretch’ 。若伸縮容器具有明確的側長度，且 ‘align-content’，且伸縮行側長度的總和小於伸縮容器的內-側長度，則給各伸縮行增加相同的側長度，使得側長度的總和剛好與伸縮容器的內-側長度相等。 折疊 ‘
visibility: collapse’ 項目。若有 ‘visibility: collapse’ 的伸縮項目，記下項目所在的行的側長度為項目的支撐長度，並從頭開始重新布局。在第二輪布局中，當進行蒐集伸縮項目成伸縮行步驟的時候，將已折疊項目的主長度當作是零。在該步驟之後的剩下的演算法步驟裡，完全忽略已折疊的項目（將這些視為 ‘
display: none’ ），但是在計算各伸縮行的側長度的步驟之後，若有任何一行的側長度小於在該行所有已折疊的項目裡最大的支撐長度，將該行的側長度設為該支撐長度。在第二輪布局中跳過本步驟
- 決定各伸縮項目側長度的使用值。若伸縮項目設有 ‘
align-self: stretch’，且其側長度屬性是 ‘auto’，且其側軸邊界都不是 ‘auto’，則外-側長度的的使用值是其伸縮行的側長度截至最大、最小值（透過側長度屬性）的結果。否則，側長度的使用值是項目的假定側長度。
主軸對齊
分配剩下的空間。對於各伸縮行：
- 若剩下的空間為正且在這行中至少有一個主軸邊界是 ‘
auto’，將剩下的空間平均分配給這些邊界。否則，將所有 ‘auto’ 邊界設為零。 - 按照 ‘
justify-content’ 進行沿著主軸的項目對齊。
- 若剩下的空間為正且在這行中至少有一個主軸邊界是 ‘
側軸對齊
- 決定側軸 ‘
auto’ 邊界。若某個伸縮項目有 ‘auto’ 側軸邊界，且其（將 ‘auto’ 邊界視為零）外-側長度小於其伸縮行的側長度，將長度的差異平均分配給 ‘auto’ 邊界。 - 沿著側軸對齊所有的伸縮項目：若項目的兩個側軸邊界都不為 ‘
auto’ ，按照 ‘align-self’ 對齊該伸縮項目。 決定伸縮容器側長度的使用值：
- 若側長度屬性有明確大小，使用該值。
- 否則，使用各伸縮行的側長度的總和。
- 對齊所有伸縮行：按照 ‘
align-content’ 對齊所有伸縮行。
決定可伸縮長度
使用以下步驟決定伸縮行裡項目的可伸縮長度：
- 決定使用哪個伸縮比例。先求目標行裡所有項目外-假定主長度的總和。若總和小於伸縮容器的內主長度，則在本演算法之後的部份使用擴展比率。否則，使用收縮比率。
- 決定不可伸縮項目的大小。對於任何伸縮比率為零的項目，設項目主長度的使用值為項目的假定主長度。
- 確認可否配置空間。若所有目標行裡的伸縮項目都要不是被凍結要不是伸縮比率為零，則結束本演算法。
- 計算可配置空間。先求目標行裡所有項目外-伸縮基準長度的總和，將伸縮容器的內主長度剪掉總和，即為可配置空間。
-
配置正比於伸縮比例的空間。若可配置空間的正負號與選擇伸縮比率的正負號相同，配置正比於項目伸縮比率的空間到可伸縮項目主長度裡：
若可配置空間為正
找出項目擴展比率與目標行裡項目的擴展比率總和的比率。將項目的主長度設為伸縮基準長度加可配置空間裡佔有的部份（使用前面算出的比率）。
若可配置空間為負
對於每一個在目標行的項目，將收縮比率乘上外-伸縮基準長度，將這個值記為正規化收縮比率。找出項目正規化收縮比率與目標行裡項目的正規化收縮比率總和的比率。將項目的主長度設為伸縮基準長度減可配置空間裡佔有的部份（使用前面算出的比率）。請注意得到的內主長度可能是負的 ― 下一個步驟會校正這個問題
- 修復最大、最小違規。將項目的主長度截至其最大、最小值（透過主長度屬性）。若項目的主長度變小，則這是最大違規。若項目的主長度變大，則這是最小違規。
-
總違規事前一個步驟所有調整的總和（截至其最大、最小後的長度 - 未截至其最大、最小後長度）。若總違規為：
零
離開演算法
正
凍結所有最小違規，重設所以其它項目到進入本演算法的大小，並回到本演算法的步驟 2。
負
凍結所有最大違規，重設所以其它項目到進入本演算法的大小，並回到本演算法的步驟 2。