成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

對(duì)Flex布局的總結(jié)與思考

springDevBird / 2470人閱讀

摘要：主軸方向的多余空間的出現(xiàn)是因?yàn)槿萜鲗挾仍仨?xiàng)寬度之和。對(duì)空間分配的思考是如何計(jì)算項(xiàng)的寬度的所有項(xiàng)先按照原始寬度在容器中排列。開發(fā)時(shí)布局的一般流程根據(jù)設(shè)計(jì)，確定需要多少行來顯示所有內(nèi)容，然后確定每一行有哪些項(xiàng)。對(duì)每一項(xiàng)，定義其樣式。

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

flex布局規(guī)范的設(shè)計(jì)目標(biāo)

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

與之對(duì)應(yīng)的，CSS Grid Layout是一個(gè)二維布局模型。兩者互為補(bǔ)充。

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

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

為了方便討論，我們假設(shè)主軸是水平方向，當(dāng)主軸是垂直方向的時(shí)候是同理的。
對(duì)align和justify的思考 主軸方向的多余空間

justify-content定義的是主軸方向的多余空間要如何分布。
主軸方向的多余空間的出現(xiàn)是因?yàn)?strong>容器寬度 > 元素項(xiàng)寬度之和。如圖：

這個(gè)可交互實(shí)例來自MDN。

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

一個(gè)行內(nèi)，交叉軸方向的多余空間

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

一個(gè)行內(nèi)，交叉軸方向的多余空間的出現(xiàn)是因?yàn)?strong>行的高度大于項(xiàng)的高度。由于各個(gè)項(xiàng)的高度不一致，比較高的項(xiàng)會(huì)將整行的高度撐開，對(duì)于那些比較矮的項(xiàng)，在它的垂直方向上就會(huì)出現(xiàn)多余空間。如下圖：

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

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

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

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

這個(gè)可交互實(shí)例來自MDN。
對(duì)空間分配的思考

flex是如何計(jì)算項(xiàng)的寬度的？

所有項(xiàng)先按照原始寬度在容器中排列。

原始寬度由flex-basis決定，由于flex-basis默認(rèn)值是auto（意思是取content-box的寬度作為flex-basis），因此一般width就是原始寬度。如果沒有定義width，則width由項(xiàng)的子元素?fù)伍_。

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

總結(jié)來說就是，width決定原始寬度，flex-grow/flex-shrink決定分配比例，min-width、max-width限制最終寬度。

flex寬度計(jì)算的例子（可在瀏覽器中打開）：





  
  
  
  Document

計(jì)算過程：
content1原始寬度100px，content2原始寬度0px。剩余寬度為1000px-100px=900px。
由于content的flex-grow都相等，因此剩余寬度被平均分配，每個(gè)content分到450px。
content1最終寬度100px+450px=550px，content2最終寬度0px+450px=450px。

開發(fā)時(shí)布局的一般流程

根據(jù)UI設(shè)計(jì)，確定需要多少“行”來顯示所有內(nèi)容，然后確定每一“行”有哪些“項(xiàng)”。一個(gè)“項(xiàng)”本身也可以成為容器，包含一行或多行。

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

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

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

參考資料

圖解CSS3 Flexbox屬性

Flex 布局教程 - 阮一峰

CSS Flexible Box Layout - MDN

Basic concepts of flexbox - MDN

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/113821.html

相關(guān)文章

  • 對(duì)“粘連”footer布局的思考和總結(jié)

    摘要：經(jīng)典的粘連布局參考文章鏈接在文章末尾，簡(jiǎn)單的語(yǔ)言總結(jié)如下經(jīng)典的粘連布局就是。當(dāng)元素比較短的時(shí)候比如小于屏幕的高度，我們期望這個(gè)元素能夠粘連在屏幕的底部。 經(jīng)典的粘連footer布局 參考文章鏈接在文章末尾，簡(jiǎn)單的語(yǔ)言總結(jié)如下： 經(jīng)典的粘連footer布局就是。我們有一塊內(nèi)容。當(dāng)?shù)母叨茸銐蜷L(zhǎng)的時(shí)候，緊跟在后面的元素會(huì)跟在元素的后面。當(dāng)元素比較短的時(shí)候（比如小于屏幕的高度），我們期望這個(gè)元...

    Near_Li 評(píng)論0 收藏0

  • HTML-CSS

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

    xiaokai 評(píng)論0 收藏0

  • HTML-CSS

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

    CHENGKANG 評(píng)論0 收藏0

  • 【CSS練習(xí)】IT修真院--練習(xí)4-移動(dòng)端界面

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

    kun_jian 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<