① flex布局全解析
很長一段時間, 我知道有 flex 這個布局方式, 但是始終沒有去學它. 3點原因:
最近由於開發需要, 學習了下WeUI的實現 , 發現裡面大量使用了 flex 布局, 於是決定學習一下.
Flexbox Layout , 官方名為 CSS Flexible Box Layout Mole , 意為"彈性布局", 是CSS3中引入的一種更加靈活高效的布局/對齊/排序方式(還有一種更適合大型布局的 網格布局 CSS Grid Layout Mole ). flex 是 flexible 的縮寫.
任何一個容器都可以指定為flex布局。
行內元素也可以使用flex布局。
採用flex布局的元素被稱為 flex容器 (flex container) , 它的子元素即為 flex元素 (flex item) .
flex容器中包含兩個相互垂直的軸, 即 主軸 (main axis) 和 副軸 (cross axis) .
flex元素沿主軸從 主軸起點 (main start) 到 主軸終點 (main end) 依信野蔽次排布.
如果flex容器包含多行flex元素, 則 flex行 (flex lines) 沿副軸從 副軸起點 (cross start) 到 副軸終點 (cross end) 依次排布.
單個flex元素占據的主軸空間叫做 主軸長度 (main size) , 占據的副軸空間叫做 副軸滑州長度 (cross size) .
Getting Dicey With Flexbox 中提到:
前一段時間同事做過 video 相關的開發, 踩到各種坑, 因此我知道 video 的支持不那麼好, 特別是在Android上. 讓我驚奇的是 flex 竟然比 video 的支持更好?
從 CanIUse 的數據來看, flex 的支持度是: 82.65% (支持) + 14.17% (部分支持) = 96.81% , 而 video 的支持度是: 92.48% . 瀏覽器對 flex 的支持好像並沒脊跡有特別好...
但是有微信的WeUI使用了 flex 布局, 我覺得在移動端 flex 應該還是支持度比較高的.
所以, 如果你是做移動端開發的, 可以優先考慮 flex .
下面就開始介紹與 flex 布局相關的屬性. 以作用對象分為兩組, 第一組作用於flex容器, 第二組作用於flex元素.
注意: 以下屬性值都可以有 initial (該屬性的默認值)和 inherit (繼承自父元素), 本處省略.
這類屬性有6種, 分別為:
注意:
注意: row 和 row-reverse 受到了 direction 屬性(默認值為 ltr , 可改為 rtl )的影響.
注意: 此屬性只在flex容器中有 多行 flex元素時才有作用.
這類屬性有6種, 分別為:
注意: flex元素的 float , clear 和 vertical-align 會失效.
當flex元素有父元素時, 它的 align-self: auto 即為父元素的 align-items 屬性; 否則(無父元素時), 相當於 stretch .
當有剩餘空間時, flex元素會根據 flex-grow 按比例分配剩餘空間.
默認值 0 代表, 即使有剩餘空間, 該flex元素也不放大.
當flex容器空間不足時, flex元素會根據 flex-shrink 按比例縮小.
flex-shrink 為 0 則表示, 即使flex容器空間不足, 該flex元素也不縮小.
flex-basis 定義了分配剩餘空間之前flex元素的初始大小, 可為長度值(如 20% , 5rem 等)或 auto 等關鍵詞.
flex-basis: auto 表示, 以 flex元素的主軸長度 為 flex-basis . 若flex元素的主軸長度也是 auto , 則以flex元素內容(即所有子元素)的大小為 flex-basis .
除了 auto 還有 content , max-content , min-content 和 fit-content 關鍵詞, 但是現在瀏覽器對它們的支持太少, 可以忽略.
(敲黑板) 同學們注意, 這里是重點!
這里的 可選值 我參照了 W3C flexbox 的寫法. 其中:
舉例來說, a | [ b || c ] 包含的可能情況有 a , b , c , b c , c b .
現在回過頭來再看 none | [ <『flex-grow』> <『flex-shrink』>? || <『flex-basis』> ] 就清晰多了.
注意, none 是一個特殊值, 相當於 0 0 auto .
另外, 如果 flex 中不指定:
注意: flex 的初始值是 0 1 auto , 即由每個 flex 因子本身的默認值組成(比方說 flex-grow 的默認值就是 0 ).
但是 , 如果利用 flex 設置了至少一個 flex 因子, 那麼沒被設置的那些 flex 因子的默認值(按grow, shrink, basis的順序)分別是 1 1 0 .
我來舉幾個栗子.
W3C建議使用簡寫形式 flex , 因為它可以方便地應對下面4種 常見情況 .
自此, 我們已經知道了 flex-grow , flex-shrink 和 flex-basis 的作用. 根據這三個值, 計算flex元素的大小隻需三步:
第一步: 計算元素的 flex-basis , 有兩種情況: 1. 具體的長度值, 或, 2. auto (即flex元素的大小). (這里忽略了 content 等目前支持還不完善的關鍵詞).
第二步: 計算剩餘空間, 即 剩餘空間 = flex容器的內部空間 - flex元素flex-basis值的總和 .
第三步: 按照 flex 因子(放大時為 flex-grow ; 縮小時為 flex-shrink )分配剩餘空間到每個元素. flex元素的最終大小 = flex-basis - flex-factor * 剩餘空間 .
舉個栗子.
假設flex容器的內部空間為 200px , flex元素的大小的總和是 160px . 看起來, 還有 200 - 160 = 40px 的剩餘空間, 應該放大flex元素, 是不是? 不一定! 要看它們的 flex-basis 總和.
假設它們的 flex-basis 總和是 300px , 那麼剩餘空間應該是 300 - 200 = -100px . 此時剩餘空間是 負數 , 應該以 flex-shrink 對每個flex元素在 flex-basis 的基礎上進行 縮小 .
下例中, 所有flex元素本身的大小為 80px , 元素中為 flex 值.
200px
0 1 auto
0 3 auto
0 1 150px
0 3 150px
125px
75px
你可以看到, 第一行的flex元素因為設置了 flex-basis:auto , 所以它們的 flex-basis 就相當於元素大小, 即 80px , 即 flex-basis 總和為 160px , 不足容器的 200px 空間, 此時應該放大元素. 但又由於元素的 flex-grow 為 0 , 所以每個元素分配到 0 * 40 = 0px 的剩餘空間, 即不放大.
第二行的flex元素設置了 flex-basis:150px , 所以它們的 flex-basis 總和為 300px , 超過了容器的 200px 空間, 故按照 flex-shrink (比例為 1:3 )進行縮小. 由於剩餘空間為 -100px , 所以第一個元素應縮小 25px 變成 125px , 第二個元素應縮小 75px 變成 75px .
絕對flex: 從0開始分配空間.
第一行中 flex-basis 為 0 , 表示每個flex元素的初始大小都視為 0 . 此時, 剩餘空間就是"flex容器的大小".
相對flex: 從flex元素大小開始分配空間.
第二行中 flex-basis 為 auto , 表示每個flex元素的初始大小都是它本身的大小. 此時, 剩餘空間就是"flex容器的大小 - flex元素大小的總和".
呃... flex的東西還是挺多的, 特別是 flex 因子相關的部分, 得花點兒時間理解.
但是, 我相信學flex是值得的, 誰用誰知道!
② Flex布局：Flex布局
傳統布局：
flex布局：
使用范圍：
1、如果是PC端頁面布局，建議使用傳統布局
2、如果是移動端或者不考慮兼容性問題的PC端，建議使用flex彈性布如卜局
flex意為彈性布局，通過給父盒子渣辯穗添加flex屬性，來控制子盒子的位置和排列方式，用來為盒狀模型提供最大的靈活性，任何一個容器都可以指定為flex布局
在flex布局中，有主軸和側軸的概念之分，即所謂的行與列，默認的主軸方向是從左往右，默認的側軸方向是從上往下。flex-direction屬性決定主軸的方向，也就是決定著子元素的排列方向，其中，主軸和側軸是會變化的，就看flex-direction設置誰作為主軸，子元素就會跟著作為主軸的來排列布局。
設置側軸排列
justify-content屬性定義了項目在主軸上的對齊方式，使用前提必須確定好誰是主軸.
默認情況下，子元素都排在一條線上（主軸灶旦），flex-wrap屬性定義，flex布局中默認是不換行的。意味著隨著子元素不斷增加，會直接改變子元素的寬高，不斷地擠在一行上。
align-items設置側軸上的子元素的排列方式(單行的)，這個屬性是控制子元素在側軸(默認是y軸)上的排列方式，在子元素為單個元素的時候去使用。
設置子元素在側軸上的排列方式，並且只能用於子元素出現在換行的情況中，在單行下是沒有任何效果的。
flex-flow屬性是flex-direction和flex-wrap屬性的復合屬性
flex布局中子元素也存在著相對應的一些屬性
flex屬性定義子元素分配 剩餘空間 ，用flex來表示占的多少份，默認為0
針對這個，可以先了解有名的CSS布局 聖杯布局 以及 雙飛翼布局 ,大致的效果為兩邊盒子固定，中間自適應。使用flex布局來做的話，就是去處理剩餘空間的份數。
align-self屬性允許單個的子元素與其他子元素不一樣的對齊方式，可覆蓋align-items屬性，默認值為auto，表示繼承父元素的align-item屬性，如果沒有父元素，則等同於stretch。
order去控制子元素的排列順序，數值越小的，排列越靠前，默認為0
首先給每個子元素設置一個order值，需要調到前面的，單獨提出來將order值設小點即可，想要放到後面order值設大點即可。