網(wǎng)頁前端彈性布局(flex)是指在頁面中任何一個元素只要設(shè)置了display:flex屬性時，那么當(dāng)前盒子都稱為彈性盒子。彈性盒子默認(rèn)有兩條軸： 默認(rèn)水平顯示的主軸 和 始終要垂直于主軸的側(cè)軸(也叫交叉軸)，在彈性盒子中所有的子元素都是沿著主軸方向顯示。

Flexbox 是 flexible box 的簡稱（注：意思是“靈活的盒子容器”），是 CSS3 引入的新的布局模式。它決定了元素如何在頁面上排列，使它們能在不同的屏幕尺寸和設(shè)備下可預(yù)測地展現(xiàn)出來。它之所以被稱為 Flexbox ，是因?yàn)樗軌驍U(kuò)展和收縮 flex 容器內(nèi)的元素，以最大限度地填充可用空間。與以前布局方式（如 table 布局和浮動元素內(nèi)嵌塊元素）相比，F(xiàn)lexbox 是一個更強(qiáng)大的方式：

1、在不同方向排列元素
2、重新排列元素的顯示順序
3、更改元素的對齊方式
4、動態(tài)地將元素裝入容器

在前端彈性布局使用中有關(guān)em/rem彈性單位的使用說明：

第1. rem/em區(qū)別
rem是相對于html元素的font-size大小而言的，而em是相對于其父元素。

第2.使用em或rem讓布局更加靈活
使用 em 或 rem 單位進(jìn)行相對布局，相對%百分比更加靈活，同時可以支持瀏覽器的字體大小調(diào)整和縮放等的正常顯示，因?yàn)閑m是相對父級元素的原因沒有得到推廣。傳統(tǒng)建企業(yè)網(wǎng)站時使用的是絕對單位px（像素）。如果從網(wǎng)站易用性方面考慮，字體大小應(yīng)該是可變的。建企業(yè)網(wǎng)站時，占據(jù)大部分瀏覽器市場的IE無法調(diào)整那些使用px作為單位的字體大小。

第3.em/rem單位的自適應(yīng)性
網(wǎng)頁前端彈性布局的特點(diǎn)是，包裹文字的各元素的尺寸采用em/rem做單位，而頁面的主要劃分區(qū)域的尺寸仍使用百分?jǐn)?shù)或px做單位（同「流式布局」或「靜態(tài)/固定布局」）。早期瀏覽器不支持整個頁面按比例縮放，僅支持網(wǎng)頁內(nèi)文字尺寸的放大，這種情況下。使用em/rem做單位，可以使包裹文字的元素隨著文字的縮放而縮放。

第4.方便瀏覽器對em/rem的數(shù)值計(jì)算
瀏覽器的默認(rèn)字體高度一般為16px，即1em:16px，但是 1:16 的比例不方便計(jì)算，為了使單位em/rem更直觀，CSS編寫者常常將頁面跟節(jié)點(diǎn)字體設(shè)為62.5%，比如選擇用rem控制字體時，先需要設(shè)置根節(jié)點(diǎn)html的字體大小，因?yàn)闉g覽器默認(rèn)字體大小16px*62.5%=10px。這樣1rem便是10px，方便了計(jì)算。

第5. 對padding或margin屬性良好的支持性
用em/rem定義尺寸的另一個好處是更能適應(yīng)縮進(jìn)/以字體單位padding或margin／瀏覽器設(shè)置字體尺寸等情況（因?yàn)閑m/rem相對于字體大小，會同步改變）。例如：p{ text-indent: 2em; }。

第6. em/rem本身的屬性受到開發(fā)人員的喜歡
由于網(wǎng)頁前端彈性布局中em/rem屬性的優(yōu)勢讓更多的技術(shù)開發(fā)人員喜歡并選擇，使用rem單位的彈性布局尤其在移動端很受歡迎。

第7.em/rem屬性一些小小的不足
其實(shí)在移動端使用所謂的彈性布局，是比較勉強(qiáng)的。移動端網(wǎng)頁前端彈性布局流行起來的原因歸根結(jié)底是rem單位對于（根據(jù)屏幕尺寸）調(diào)整頁面的各元素的尺寸、文字大小時比較好用。其實(shí)，使用vw、vh等后起之秀的單位，可以實(shí)現(xiàn)完美的流式布局（高度和文字大小都可以變得“流式”），彈性布局就不再必要了。