(flex container)是指在頁面中任何一個元素只要設置了display:flex屬性時,那么當前盒子都稱為彈性盒子。彈性盒子默認有兩條軸: 默認水平顯示的主軸 和 始終要垂直于主軸的側軸(也叫交叉軸),在彈性盒子中所有的子元素都是沿著主軸方向顯示。
Flexbox 是 flexible box 的簡稱(注:意思是“靈活的盒子容器”),是 CSS3 引入的新的布局模式。它決定了元素如何在頁面上排列,使它們能在不同的屏幕尺寸和設備下可預測地展現出來。它之所以被稱為 Flexbox ,是因為它能夠擴展和收縮 flex 容器內的元素,以最大限度地填充可用空間。與以前布局方式(如 table 布局和浮動元素內嵌塊元素)相比,Flexbox 是一個更強大的方式:
1、在不同方向排列元素
2、重新排列元素的顯示順序
3、更改元素的對齊方式
4、動態地將元素裝入容器
在使用中有關em/rem彈性單位的使用說明:
第1. rem/em區別
rem是相對于html元素的font-size大小而言的,而em是相對于其父元素。
第2.使用em或rem讓布局更加靈活
使用 em 或 rem 單位進行相對布局,相對%百分比更加靈活,同時可以支持瀏覽器的字體大小調整和縮放等的正常顯示,因為em是相對父級元素的原因沒有得到推廣。傳統時使用的是絕對單位px(像素)。如果從網站易用性方面考慮,字體大小應該是可變的。時,占據大部分瀏覽器市場的IE無法調整那些使用px作為單位的字體大小。
第3.em/rem單位的自適應性
的特點是,包裹文字的各元素的尺寸采用em/rem做單位,而頁面的主要劃分區域的尺寸仍使用百分數或px做單位(同「流式布局」或「靜態/固定布局」)。早期瀏覽器不支持整個頁面按比例縮放,僅支持網頁內文字尺寸的放大,這種情況下。使用em/rem做單位,可以使包裹文字的元素隨著文字的縮放而縮放。
第4.方便瀏覽器對em/rem的數值計算
瀏覽器的默認字體高度一般為16px,即1em:16px,但是 1:16 的比例不方便計算,為了使單位em/rem更直觀,CSS編寫者常常將頁面跟節點字體設為62.5%,比如選擇用rem控制字體時,先需要設置根節點html的字體大小,因為瀏覽器默認字體大小16px*62.5%=10px。這樣1rem便是10px,方便了計算。
第5. 對padding或margin屬性良好的支持性
用em/rem定義尺寸的另一個好處是更能適應縮進/以字體單位padding或margin/瀏覽器設置字體尺寸等情況(因為em/rem相對于字體大小,會同步改變)。例如:p{ text-indent: 2em; }。
第6. em/rem本身的屬性受到開發人員的喜歡
由于中em/rem屬性的優勢讓更多的技術開發人員喜歡并選擇,使用rem單位的彈性布局尤其在移動端很受歡迎。
第7.em/rem屬性一些小小的不足
其實在移動端使用所謂的彈性布局,是比較勉強的。移動端流行起來的原因歸根結底是rem單位對于(根據屏幕尺寸)調整頁面的各元素的尺寸、文字大小時比較好用。其實,使用vw、vh等后起之秀的單位,可以實現完美的流式布局(高度和文字大小都可以變得“流式”),彈性布局就不再必要了。
免費咨詢:18838171308