1樓：go陌小潔
彈性盒模型決定一個盒子在其他盒子中的分佈方式以及如何處理可用的空間。這與xul（火狐使用的使用者互動語言）相似，其它語言也使用相同的盒模型，如xaml 、gladexml。
使用該模型，可以很輕鬆的建立自適應瀏覽器視窗的流動佈局或自適應字型大小的彈性佈局。例子使用以下的html**：12
3傳統的盒模型基於html流在垂直方向上排列盒子。使用彈性盒模型可以規定特定的順序，也可以反轉之。要開啟彈性盒模型，只需設定擁有子盒子的盒子的display的屬性值為box（或inline-box）即可。
display: box;
水平或垂直分佈
「box-orient」定義分佈的座標軸：vertical和horizional。這兩個值定義盒子如何顯示
body
反向分佈
「box-direction」可以設定盒子出現的順序。預設情況下，只需定義分佈座標軸——box隨html流分佈。如果為水平座標軸，則從左到 右分佈；垂直座標軸則從上到下分佈。
定義「box-direction」的屬性值為「reverse」，則反轉盒子的排列順序。
body
具體分佈
屬性「box-ordinal-group」定義盒子分佈的順序。可以隨意的控制其分佈順序。這些組以一個從「1」開始的數字定義，盒模型將首先分佈這些組，所有這些盒子將在每個組中。
分佈將從小到大排列。
body
#box1
#box2
#box3
盒子尺寸
預設情況下，盒子並不具有彈性，如果box-flex的屬性值至少為1時，則變得富有彈性。
如果盒子不具有彈性，它將儘可能的寬使其內容可見，且沒有任何溢位，其大小由「width」和「height」來決定（或min-height、min-width、max-width、max-height）。
如果盒子是彈性的，其大小將按下面的方式計算：
具體的大小宣告（width、height、min-width、min-height、max-width、max-height）；
父盒子的大小和所有餘下的可利用的內部空間
如果盒子沒有任何大小宣告，那麼其大小將完全取決於父box的大小。即：盒子的大小等於父級盒子的大小乘以其box-flex在所有子盒子box-flex總和中的百分比（子盒子的大小=父盒子的大小*子盒子的box-flex/所有子盒子的box-flex值的和）。
如果一個或更多的盒子有一個具體的大小宣告，那麼其大小將計算其中，餘下的彈性盒子將按照上面的原則分享剩下的可利用空間。
看看下面的例子，理解起來更容易。
所有盒子都是彈性的
下面的例子中，box1的大小為box2的兩倍，box2與box3大小一樣。看起來好像是用百分比定義盒子的大小，但是有一個區別：使用彈性盒模型，增加一個盒子，無須重新計算其大小。
body
#box1
#box2
#box3
一些盒子有固定大小
下面的例子中，box3並不是彈性的，寬度為160px；這樣box1和box2將有240px的可利用空間。因此，box1的寬度為160px(240*2/3)，box2的寬度為80px(240*1/3)。
body
#box1
#box2
#box3
溢位管理
因為是彈性盒子、非彈性盒子混排，有可能所有盒子的尺寸大於或小於父盒子的尺寸。這樣就有可能空間太多或空間不足。
空間太多如何處理
可利用空間的分佈取決於兩個屬性值：box-align 和 box-pack。
屬性「box-pack」管理水平方向上的空間分佈，有以下四個可能屬性：start、end、 justify、 or center。
start 所有盒子在父盒子的左側，餘下的空間在右側；
end所有盒子在父盒子的右側，餘下的空間在左側；
justify 餘下的空間在盒子間平均分配；
center 可利用的空間在父盒子的兩側平均分配。
屬性「box- align」管理垂直方向上的空間分佈，有以下五個可能屬性之：start、 end,、center、 baseline和 stretch。
start 每個盒子沿父盒子的上邊緣排列，餘下的空間位於底部；
end 每個盒子沿父盒子的下邊緣排列，餘下的空間位於頂部；
center 可用空間平均分配，上面一半，下面一半；
baseline 所有盒子沿著它們的基線排列，餘下的空間可前可後；
stretch 每個盒子的高度調整到適合父盒子的高度
body
#box1
#box2
#box3
空間不足怎麼辦
與傳統的盒模型一樣，overflow屬性用來決定其顯示方式。為了避免溢位，你可以設定box-lines為multiple使其換行顯示。
彈性盒模型看起來很不錯，gecko 和 webkit對該模型都有一些嘗試性的測試。在這些屬性之前加上-moz和-webkit即可使用該屬性。也即是說，firefox、safari、chrome可以使用這些特性，可以看看這個彈性盒模型的demo。
2樓：
css3引入了新的盒模型——彈性盒模型，該模型決定一個盒子在其他盒子中的分佈方式以及如何處理可用的空間。使用該模型，可以很輕鬆的建立自適應瀏覽器視窗的流動佈局或自適應字型大小的彈性佈局。
傳統的盒模型基於html流在垂直方向上排列盒子。使用彈性盒模型可以規定特定的順序，也可以反轉之。要開啟彈性盒模型，只需設定擁有子盒子的盒子的display的屬性值為box（或inline-box）即可。
你就想象盒子和具有彈性的，在瀏覽器視窗大小變化時，相應的盒子大小也會發生變化。
在以前，我們一般是通過百分比設定寬高來實現類似效果。
css3中的彈性框佈局flexbox可以實現的效果有哪些?
3樓：匿名使用者
以前用float浮動能做出來的玩意基本上都可以做。關鍵是flexbox可以：
可以方便的定義視覺上的先後順序，如：
瀏覽器渲染出來：
234 345 123
可以讓一大段內容不用新增多餘的標籤分割，直接實現豎方向的多列布局遺憾的是現在玩這個似乎早了點。
彈性工作是什麼意思呀，彈性工作是什麼意思呀
t夢魘 所謂彈性工作制是指在完成規定的工作任務或固定的工作時間長度的前提下，員工可以自由選擇工作的具體時間安排，以代替統一固定的上下班時間的制度。彈性工作時間制有多種形式 1 核心時間與彈性時間結合制。一天的工作時間由核心工作時間 一般為 5 6個小時 和核心工作時間兩頭的彈性工作時間所組成。2 成...
3dmax攝影機安全框的框分別是什麼意思新手不懂啊
您好max裡面的這三個安全框 分別對應 藍色 動作安全區 黃色 標題安全區 紫色 使用者安全區 活動區域 黃色最大的那個 該區域將被渲染，而不考慮視口的縱橫比或尺寸。動作安全區 藍色 在該區域內包含渲染動作是安全的。鎖定 核取方塊可以鎖定 動作 框的縱橫比。開啟 鎖定 時，使用 二者 微調器來設定在...
CSS屬性margin是什麼意思
飛鷹 margin 0 auto 0px表示上外抄邊距為0px，左右外邊距自動，下外邊距為0px。margin跟padding一樣，也有簡潔寫法。我們可以使用margin屬性來設定四個方向的外邊距。在實際程式設計中，我們往往使用的是margin的這種高效簡潔寫法來程式設計。 margin 0 aut...