国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

對Flex布局的總結與思考

springDevBird / 2462人閱讀

摘要：主軸方向的多余空間的出現是因為容器寬度元素項寬度之和。對空間分配的思考是如何計算項的寬度的所有項先按照原始寬度在容器中排列。開發時布局的一般流程根據設計，確定需要多少行來顯示所有內容，然后確定每一行有哪些項。對每一項，定義其樣式。

閱讀本文之前最好對flex布局有基本了解，可以通過“參考資料”中列舉的資源來學習。

flex布局規范的設計目標

一維布局模型(one-dimensional layout model)，元素項沿著水平或垂直方向來排列，就像一條沿著一個方向的“流”。

與之對應的，CSS Grid Layout是一個二維布局模型。兩者互為補充。

空間分配(space distribution)，（假設主軸是水平方向）元素項的最終寬度受到當前行剩余空間（或不足空間）的影響，就像是有彈性一樣會膨脹和收縮。

強大的對齊支持(align and justify)，align和justify本質上來說，是定義多余(空白)的空間要放在哪里。align(align-items, align-content)定義了交叉軸方向上的多余(空白)空間分布，而justify(justify-content)定義了主軸方向的多余(空白)空間要分布。

為了方便討論，我們假設主軸是水平方向，當主軸是垂直方向的時候是同理的。
對align和justify的思考 主軸方向的多余空間

justify-content定義的是主軸方向的多余空間要如何分布。
主軸方向的多余空間的出現是因為容器寬度 > 元素項寬度之和。如圖：

這個可交互實例來自MDN。

等一下，不是說 【主軸方向的多余空間會分配給元素項->使元素項膨脹->元素項占滿主軸的空間】 的嗎？為什么這里又有多余的空間來給justify-content分發呢？這是因為元素項不一定會膨脹(flex-frow的默認值為0，默認不膨脹)，即使膨脹，膨脹后的寬度也會受到max-width的約束。因此有很多時候，主軸在元素項膨脹以后還是有多余空間的。

一個行內，交叉軸方向的多余空間

align-items定義的是一個行內，交叉軸方向的多余空間要如何分布。

一個行內，交叉軸方向的多余空間的出現是因為行的高度大于項的高度。由于各個項的高度不一致，比較高的項會將整行的高度撐開，對于那些比較矮的項，在它的垂直方向上就會出現多余空間。如下圖：

這個可交互實例來自MDN。
關于高度撐開的討論，見用css控制元素高度：自底向上和自頂向下的方法。
行與行之間，交叉軸方向的多余空間

align-content定義的是行與行之間，交叉軸方向的多余空間要如何分布。

在這里說的“行”，指的是一個flex容器內，由于flex-wrap: wrap造成的換行（下面會討論到換行），而不是指【第一個flex容器是一行，第二個flex容器是第二行】！

行與行之間，交叉軸方向的多余空間的出現是因為容器高度 > 容器內各行的高度之和。
前面說過，一個行的高度是由這一行中最高的項撐開的。一個flex容器，默認的時候(height:auto)，其高度也是被其內部的所有行的高度撐開的，在這個時候容器的高度恰好等于所有行的高度之和，不存在“行與行之間，交叉軸方向的多余空間”。
但是如果容器本身定義了height: 10000px呢？它的高度就固定了，不會受到其內部的行的影響。這時候，如果所有行的高度之和不足以填滿容器高度，交叉軸方向就會出現多余空間。如圖：

這個可交互實例來自MDN。
對空間分配的思考

flex是如何計算項的寬度的？

所有項先按照原始寬度在容器中排列。

原始寬度由flex-basis決定，由于flex-basis默認值是auto（意思是取content-box的寬度作為flex-basis），因此一般width就是原始寬度。如果沒有定義width，則width由項的子元素撐開。

如果容器有多余的寬度，則將這些多余寬度分配給每個項（分配比例由flex-grow控制），使得項的寬度增加，得到每個項的flex寬度。最終寬度基于flex寬度，但還會受到min-width、max-width的限制。
如果所有項的原始寬度已經超過了容器元素的寬度，那么會先檢查flex-wrap是否允許換行，如果允許換行，則換行以后再計算flex寬度；如果不允許換行，則將超出的寬度分配給每個項（分配比例由flex-shrink控制），使得項的寬度減小，得到每個子元素的flex寬度。最終寬度基于flex寬度，但還會受到min-width、max-width的限制。

總結來說就是，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。

開發時布局的一般流程

根據UI設計，確定需要多少“行”來顯示所有內容，然后確定每一“行”有哪些“項”。一個“項”本身也可以成為容器，包含一行或多行。

這里的“行”指的就是一個flex-direction:row的容器了（與之前的討論不同）。它可以設置flex-wrap:wrap，使得一個“行”容器在寬度不夠容納子元素的時候，在容器內部產生換行。

對每一“行”，定義其樣式。行是一個flex容器（display:flex）。并使用justify-content、align-items來定義元素在容器中的分布方式。通過margin-top來定義行之間的縱向距離。

對每一“項”，定義其樣式。使用margin、padding來對元素位置進行微調。合理使用flex-grow、flex-shrink、width、min-width、max-width來調整元素的寬度。通過margin-left來定義元素之間的橫向距離。如果這“項”本身也是一個容器（包含一行或多行），返回第2步。

參考資料

圖解CSS3 Flexbox屬性

Flex 布局教程 - 阮一峰

CSS Flexible Box Layout - MDN

Basic concepts of flexbox - MDN

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113821.html

相關文章

  • 對“粘連”footer布局的思考和總結

    摘要：經典的粘連布局參考文章鏈接在文章末尾，簡單的語言總結如下經典的粘連布局就是。當元素比較短的時候比如小于屏幕的高度，我們期望這個元素能夠粘連在屏幕的底部。 經典的粘連footer布局 參考文章鏈接在文章末尾，簡單的語言總結如下： 經典的粘連footer布局就是。我們有一塊內容。當的高度足夠長的時候，緊跟在后面的元素會跟在元素的后面。當元素比較短的時候（比如小于屏幕的高度），我們期望這個元...

    Near_Li 評論0 收藏0

  • HTML-CSS

    摘要：但是，從字體上來說雪碧圖制作，使用以及相關，圖文。由于采用了編譯，所以能夠保證在瀏覽器不支持標準布局的情況下，回滾到舊版本的，保證移動設備中能呈現出一樣的布局效果。我不想陷入和的紛爭，但是有一件事是確定的極大的提升了移動端 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個問題：怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候，看到 ...

    xiaokai 評論0 收藏0

  • HTML-CSS

    摘要：但是，從字體上來說雪碧圖制作，使用以及相關，圖文。由于采用了編譯，所以能夠保證在瀏覽器不支持標準布局的情況下，回滾到舊版本的，保證移動設備中能呈現出一樣的布局效果。我不想陷入和的紛爭，但是有一件事是確定的極大的提升了移動端 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個問題：怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候，看到 ...

    CHENGKANG 評論0 收藏0

  • 【CSS練習】IT修真院--練習4-移動端界面

    摘要：任務四一個最常見的移動端頁面完成的事情完成簡單布局，然后填充界面與效果圖對比優化完成驗收要求擴展性頂欄固定進行樣式兼容性研究完成任務四深度思考跟隨深度思考師兄建議進行修改輸入欄左側換用輸入限制電話位，密碼位根據結構的語義化修改嘗試下再加一 任務四、 一個最常見的移動端頁面 完成的事情 完成簡單布局，然后填充界面 與效果圖對比優化 完成驗收要求：header擴展性 & 頂欄固定 進行p...

    kun_jian 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<