flex屬性詳解

468122151 發布于2019-08-29 12:20 / 421人閱讀

摘要：在拜讀了阮一峰的布局教程和有關屬性的回答后整理成此文章，以便加深印象。屬性是三個屬性的簡寫形式。布局包括外部的容器和內部的項目，屬性是項目的屬性。

在拜讀了阮一峰的flex布局教程和HaoyCn有關flex屬性的回答后整理成此文章，以便加深印象。

flex屬性是flex-grow,flex-shrink,flex-basis三個屬性的簡寫形式。

flex布局包括外部的容器和內部的項目，flex屬性是項目的屬性。

若干個項目設置好flex屬性后，會有初始指定的占用空間x(具體的寬度值)，若父元素容器寬度值y大于子元素項目的占用空間x時，y-x便稱作剩余分配空間。

現將flex屬性詳細情況整理如下：

實例講解（借用HaoyCn的答案）

主軸上父容器總尺寸為 600px
子元素的總基準值是：0% + auto + 200px = 300px，其中

0% 即 0 寬度
auto 對應取主尺寸即 100px

故剩余空間為 600px - 300px = 300px
伸縮放大系數之和為： 2 + 2 + 1 = 5

剩余空間分配如下：

item-1 和 item-2 各分配 2/5，各得 120px
item-3 分配 1/5，得 60px

各項目最終寬度為：

item-1 = 0% + 120px = 120px
item-2 = auto + 120px = 220px
item-3 = 200px + 60px = 260px

當 item-1 基準值取 0% 的時候，是把該項目視為零尺寸的，故即便聲明其尺寸為 140px，也并沒有什么用，形同虛設
而 item-2 基準值取 auto 的時候，根據規則基準值使用值是主尺寸值即 100px，故這 100px 不會納入剩余空間

參考資料：
阮一峰 Flex 布局教程：語法篇
阮一峰 Flex 布局教程：實例篇
flex設置成1和auto有什么區別-HaoyCn的回答

云服務器 GPU云服務器屬性詳解屬性選擇器詳解 Mask屬性詳解 Qt屬性系統詳解

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

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

彈性盒子模型詳解

摘要：二彈性盒模型歷史彈性盒模型歷史英文原版或者查看中文翻譯版另外附上標準文檔彈性盒模型在過去幾年間制定了三版草案規范。給子元素直接添加屬性即可七后話以上是本文所有內容，以下是小白我的感慨。一、前言由于W3C在制定彈性盒模型內容有多版草案，在網上瀏覽了很多視頻和文章，版本有新有舊，所以準備寫一篇關于彈性盒模型的文章，一是輔助自己學習，二是幫忙其他前端學習者更容易地彈性盒模型。二、彈性盒...

rozbo 2019-08-28 18:27 評論0 收藏0
詳解CSS的Flex布局

摘要：本文由云社區發表是的縮寫，意為彈性布局，是的一種布局模式。通過布局，可以很優雅地解決很多布局的問題。與交叉軸兩端對齊，軸線之間的間隔平均分布。表示當空間不足時，不縮小。此文已由作者授權騰訊云社區發布本文由云+社區發表 Flex是Flexible Box 的縮寫，意為彈性布局，是CSS3的一種布局模式。通過Flex布局，可以很優雅地解決很多CSS布局的問題。下面會分別介紹容器的6個屬性和項...

番茄西紅柿 2019-04-23 13:07 評論0 收藏0
詳解CSS的Flex布局

摘要：本文由云社區發表是的縮寫，意為彈性布局，是的一種布局模式。通過布局，可以很優雅地解決很多布局的問題。與交叉軸兩端對齊，軸線之間的間隔平均分布。表示當空間不足時，不縮小。此文已由作者授權騰訊云社區發布本文由云+社區發表 Flex是Flexible Box 的縮寫，意為彈性布局，是CSS3的一種布局模式。通過Flex布局，可以很優雅地解決很多CSS布局的問題。下面會分別介紹容器的6個屬性...

lbool 2019-08-30 15:54 評論0 收藏0
彈性布局（display:flex;）屬性詳解

摘要：設為布局以后，子元素的和屬性將失效。二基本概念采用布局的元素，稱為容器，簡稱容器。它的所有子元素自動成為容器成員，稱為項目，簡稱項目。如果項目只有一根軸線，該屬性不起作用。四項目的屬性注項目屬性的全面理解較為復雜，可以參考文章一、Flex布局-前言 Flex是Flexible Box的縮寫，意為彈性布局，用來為盒狀模型提供最大的靈活性,旨在提供一個更有效地布局、對齊方式，并且能夠使容...

wangshijun 2019-08-30 15:55 評論0 收藏0