在彈性容器中 (flex container) 排列各彈性元件 (flex item) 時，預設都是以彈性元件在 DOM tree 中平輩的前後次序，依序排列。但在彈性元件中設定屬性 order 卻可以改變彈性元件的排列次序。
order
這是個設定在彈性元件中的屬性，賦予值為一無單位的數值，可以為負值，預設值為 0。若為負值，負數愈大的彈性元件則愈先排列；若為正值，正數愈大的彈性元件則愈晚排列。具有相同的數值的彈性元件，則依 DOM tree 中平輩的先後次序排列。與其說 order 設定了彈性元件的排列先後次序，不如說 order 設定了彈性元件的先後排列權值。彈性容器先分析所有彈性元件的權值，依權值分成群組，再依權值由高至底，將每一個群組中的彈性元件依其在 DOM tree 中平輩的先後次序排列，一直到所有的權值群組都排列完畢為止。
範例
範例中建立一個含有七個彈性元件的彈性容器，每個彈性元件依照其在 DOM tree 中平輩的次序標號，但在其 CSS 類別中設定 order 屬性以改變其排列的先後次序。可以試著改變 order 的設定值，以瞭解其排列的規則。
色即是空，空即是色，色不異空，空不異色，受想行識亦復如是。
form is emptiness and the very emptiness is form; emptiness does not differ from form, form does not differ from emptiness, whatever is emptiness, that is form, the same is true of feelings, perceptions, impulses, and consciousness.
色即是空，空即是色，色不異空，空不異色，受想行識亦復如是。 form is emptiness and the very emptiness is form; emptiness does not differ from form, form does not differ from emptiness, whatever is emptiness, that is form, the same is true of feelings, perceptions, impulses, and consciousness.
色即是空，空即是色，色不異空， 空不異色，受想行識亦復如是。 form is emptiness and the very emptiness is form; emptiness does not differ from form, form does not differ from emptiness, whatever is emptiness, that is form, the same is true of feelings, perceptions, impulses, and consciousness.
</body>
HTML 中，第二段的英文段落以 <span> 標記包覆，同時給於 CSS 類別名稱為 "en"，以套用類別設定，改變字母間的間距。在 HTML5 中，還可以自訂標記，做起來更方便；但如果考慮到舊版的流覽器，這個作法是比較安全的。
em 是 element 的縮寫。1em 就是 1 個 element 的大小，1.5em 就是1.5 倍 element 的大小。在某元件中設定 font-size= 1em;，在螢幕上到底以多少 px 的大小呈現，完全取決於元件在 DOM tree 中的位置，以及其先輩元件對 font-size 屬性的設定；也就是說，流覽器會從該元件的父輩元件開始回遡，一直回遡其直屬先輩直到 <html> 為止，若在回遡途中有任何一先輩元件有明確的設定字型的大小，也就是說以絕對單位設定，則停止回遡，以該先輩的設定字型大小為 1em 進行計算。若先輩的設定也是以相對單位，則繼續往上回遡，這過程有點像「遞迴」 (recursive) 。若一直回遡至 <html>，而回遡途中都沒有任何一先輩元件有明確的設定 font-size 屬性，則以流覽器的預設字型大小，也就是以 16px 為基準計算。
rem
rem 是 root element 的縮寫。其計算方式和 em 相同，唯一的不同點是 rem 不進行先輩回遡，直接以 <html> 中的 font-size 設定作為基準進行計算。若 <html> 中也沒有設定，則以流覽器的預設值 16px 作為基準。
%
百分比表示式。這個單位的計算方式和 em 完全相同，也會進行回遡。其實，font-size=150%; 和 font-size:1.5em; 這兩種設定，得到的字型大小是一樣的。就算在計算過程中有小數上的落差，人眼也看不出來。
在「響應式網頁設計」(Responsive Web Design) 大為流行的今天，使用相對單位來設定字型的大小，是一個比較好的方式。特別是在網頁於不同尺寸的螢幕上呈現時，由於螢幕的大小改變，若字型大小不能相應變更，很多時候在版面上看起來就會很不順眼。但要以單一基準，其它元件都用 rem 設定，或依元件的模組化，每一元件有一基準，而在模組內使用 em 設定，則完全視網頁的設計架構而定，這是沒有標準答案的。
範例
範人例中顯示了三段文字，前二段文字的大小是一樣的，第三段文字則比較大，主要在展示設定 font-size 時，使用 em 和 rem 所得到的結果。字體用的是黑體字，純粹是個人喜好，我認為細明體及新細明體的字體都太單薄，黑體字看起來比較紮實點。而且現在多數的作業系統預設都有提供黑體字。不過黑體字因為厚重，字與字的間距如果不寬，則顯得黑黑的一片，這是黑體字的缺點。
CSS
<style>
html {
width:100%;
font:normal normal normal 16px Arial, '文泉驛正黑', 'WenQuanYi Zen Hei', '儷黑 Pro', 'LiHei Pro', '微軟正黑體', 'Microsoft JhengHei';
}
body {
width:600px;
margin: 0 auto;
padding-top: 20px;
}
.newSize {
font-size: 1.5em;
}
.useRem {
font-size: 1rem;
}
.useEm {
font-size: 1em;
}
</style>
html{} 中設定了所要使用的字體，也明確的設定了字型的大小為 16px。
.newSize{} 調整了字型的大小為 1.5em 若回遡之後，計算結果為 24px。
.useRem{} 使用 rem 為單位，會直接參考到 html{} 中的設定，計算結果應該是 16px。
.useEm{} 使用 em 為單位，因為在 HTML 程式碼中，.newSize{} 為 .useEm{} 的父輩，所以會參考到 .newSize{} 的設定，1em 的計算結果為 24px。
<script>
$(function(){
// retrieve the jquery version number
console.log("jQuery version is %s", $.fn.jquery);
var elem = $("div");
// elem is a collection, not an Array
console.log("elem = %o", elem);
console.log("elem.length = %d", elem.length); // 2
console.log(Array.isArray(elem)); // false
// elem.prevObject is a function, returns previous matched result
console.log("elem.prevObject = %o", elem["prevObject"]);
console.log("elem.prevObject = %o", elem.prevObject);
console.log("elem.context = %o", elem.context);
console.log("elem.selector = %o", elem.selector);
console.log("DOM Element");
// return all matched elements as an array
console.log("\t %o", elem.get());
// the following expressions return the same result
console.log("\t %o", elem.get(0));
console.log("\t %o", elem.get(-1));
console.log("\t %o", elem[0]);
console.log("\t %o", elem["0"]);
console.log("jQuery Object")
console.log("\t %o", elem.eq(0));
console.log("\t %o", elem.eq());
});
</script>
