資訊專欄INFORMATION COLUMN
摘要：主軸方向的多余空間的出現(xiàn)是因為容器寬度元素項寬度之和。對空間分配的思考是如何計算項的寬度的所有項先按照原始寬度在容器中排列。開發(fā)時布局的一般流程根據(jù)設(shè)計，確定需要多少行來顯示所有內(nèi)容，然后確定每一行有哪些項。對每一項，定義其樣式。
閱讀本文之前最好對flex布局有基本了解，可以通過“參考資料”中列舉的資源來學習。
flex布局規(guī)范的設(shè)計目標
一維布局模型(one-dimensional layout model)，元素項沿著水平或垂直方向來排列，就像一條沿著一個方向的“流”。
與之對應(yīng)的，CSS Grid Layout是一個二維布局模型。兩者互為補充。
空間分配(space distribution)，（假設(shè)主軸是水平方向）元素項的最終寬度受到當前行剩余空間（或不足空間）的影響，就像是有彈性一樣會膨脹和收縮。
強大的對齊支持(align and justify)，align和justify本質(zhì)上來說，是定義多余(空白)的空間要放在哪里。align(align-items, align-content)定義了交叉軸方向上的多余(空白)空間分布，而justify(justify-content)定義了主軸方向的多余(空白)空間要分布。
為了方便討論，我們假設(shè)主軸是水平方向，當主軸是垂直方向的時候是同理的。對align和justify的思考 主軸方向的多余空間
justify-content定義的是主軸方向的多余空間要如何分布。
主軸方向的多余空間的出現(xiàn)是因為容器寬度 > 元素項寬度之和。如圖：
這個可交互實例來自MDN。
等一下，不是說 【主軸方向的多余空間會分配給元素項->使元素項膨脹->元素項占滿主軸的空間】 的嗎？為什么這里又有多余的空間來給justify-content分發(fā)呢？這是因為元素項不一定會膨脹(flex-frow的默認值為0，默認不膨脹)，即使膨脹，膨脹后的寬度也會受到max-width的約束。因此有很多時候，主軸在元素項膨脹以后還是有多余空間的。
一個行內(nèi)，交叉軸方向的多余空間align-items定義的是一個行內(nèi)，交叉軸方向的多余空間要如何分布。
一個行內(nèi)，交叉軸方向的多余空間的出現(xiàn)是因為行的高度大于項的高度。由于各個項的高度不一致，比較高的項會將整行的高度撐開，對于那些比較矮的項，在它的垂直方向上就會出現(xiàn)多余空間。如下圖：
這個可交互實例來自MDN。行與行之間，交叉軸方向的多余空間關(guān)于高度撐開的討論，見用css控制元素高度：自底向上和自頂向下的方法。
align-content定義的是行與行之間，交叉軸方向的多余空間要如何分布。
在這里說的“行”，指的是一個flex容器內(nèi)，由于flex-wrap: wrap造成的換行（下面會討論到換行），而不是指【第一個flex容器是一行，第二個flex容器是第二行】！
行與行之間，交叉軸方向的多余空間的出現(xiàn)是因為容器高度 > 容器內(nèi)各行的高度之和。
前面說過，一個行的高度是由這一行中最高的項撐開的。一個flex容器，默認的時候(height:auto)，其高度也是被其內(nèi)部的所有行的高度撐開的，在這個時候容器的高度恰好等于所有行的高度之和，不存在“行與行之間，交叉軸方向的多余空間”。
但是如果容器本身定義了height: 10000px呢？它的高度就固定了，不會受到其內(nèi)部的行的影響。這時候，如果所有行的高度之和不足以填滿容器高度，交叉軸方向就會出現(xiàn)多余空間。如圖：
這個可交互實例來自MDN。對空間分配的思考
flex是如何計算項的寬度的？
所有項先按照原始寬度在容器中排列。
原始寬度由flex-basis決定，由于flex-basis默認值是auto（意思是取content-box的寬度作為flex-basis），因此一般width就是原始寬度。如果沒有定義width，則width由項的子元素撐開。
如果容器有多余的寬度，則將這些多余寬度分配給每個項（分配比例由flex-grow控制），使得項的寬度增加，得到每個項的flex寬度。最終寬度基于flex寬度，但還會受到min-width、max-width的限制。
如果所有項的原始寬度已經(jīng)超過了容器元素的寬度，那么會先檢查flex-wrap是否允許換行，如果允許換行，則換行以后再計算flex寬度；如果不允許換行，則將超出的寬度分配給每個項（分配比例由flex-shrink控制），使得項的寬度減小，得到每個子元素的flex寬度。最終寬度基于flex寬度，但還會受到min-width、max-width的限制。
總結(jié)來說就是，width決定原始寬度，flex-grow/flex-shrink決定分配比例，min-width、max-width限制最終寬度。
flex寬度計算的例子（可在瀏覽器中打開）：
Document
計算過程：
content1原始寬度100px，content2原始寬度0px。剩余寬度為1000px-100px=900px。
由于content的flex-grow都相等，因此剩余寬度被平均分配，每個content分到450px。
content1最終寬度100px+450px=550px，content2最終寬度0px+450px=450px。
根據(jù)UI設(shè)計，確定需要多少“行”來顯示所有內(nèi)容，然后確定每一“行”有哪些“項”。一個“項”本身也可以成為容器，包含一行或多行。
這里的“行”指的就是一個flex-direction:row的容器了（與之前的討論不同）。它可以設(shè)置flex-wrap:wrap，使得一個“行”容器在寬度不夠容納子元素的時候，在容器內(nèi)部產(chǎn)生換行。
對每一“行”，定義其樣式。行是一個flex容器（display:flex）。并使用justify-content、align-items來定義元素在容器中的分布方式。通過margin-top來定義行之間的縱向距離。
對每一“項”，定義其樣式。使用margin、padding來對元素位置進行微調(diào)。合理使用flex-grow、flex-shrink、width、min-width、max-width來調(diào)整元素的寬度。通過margin-left來定義元素之間的橫向距離。如果這“項”本身也是一個容器（包含一行或多行），返回第2步。
參考資料圖解CSS3 Flexbox屬性
Flex 布局教程 - 阮一峰
CSS Flexible Box Layout - MDN
Basic concepts of flexbox - MDN
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/113821.html
摘要：經(jīng)典的粘連布局參考文章鏈接在文章末尾，簡單的語言總結(jié)如下經(jīng)典的粘連布局就是。當元素比較短的時候比如小于屏幕的高度，我們期望這個元素能夠粘連在屏幕的底部。 經(jīng)典的粘連footer布局 參考文章鏈接在文章末尾，簡單的語言總結(jié)如下： 經(jīng)典的粘連footer布局就是。我們有一塊內(nèi)容。當?shù)母叨茸銐蜷L的時候，緊跟在后面的元素會跟在元素的后面。當元素比較短的時候（比如小于屏幕的高度），我們期望這個元...
摘要：任務(wù)四一個最常見的移動端頁面完成的事情完成簡單布局，然后填充界面與效果圖對比優(yōu)化完成驗收要求擴展性頂欄固定進行樣式兼容性研究完成任務(wù)四深度思考跟隨深度思考師兄建議進行修改輸入欄左側(cè)換用輸入限制電話位，密碼位根據(jù)結(jié)構(gòu)的語義化修改嘗試下再加一 任務(wù)四、 一個最常見的移動端頁面 完成的事情 完成簡單布局，然后填充界面 與效果圖對比優(yōu)化 完成驗收要求：header擴展性 & 頂欄固定 進行p...
閱讀 3121·2021-11-25 09:43
閱讀 1093·2021-11-24 10:22
閱讀 1437·2021-09-22 15:26
閱讀 749·2019-08-30 15:44
閱讀 2541·2019-08-29 16:33
閱讀 3802·2019-08-26 18:42
閱讀 971·2019-08-23 18:07
閱讀 1899·2019-08-23 17:55
