1、理解display:box,及其瀏覽器相容情況。
為父元素新增display:box;即為彈性盒模型。
2、彈性盒模型各種屬性的運用。
1、子元素的布局排列
box-orient:horizontal; 子元素水平排列布局
：vertical; 子元素垂直排列布局
2、子元素的排列順序
box-direction:nomal; 子元素正序排列
：reverse; 倒敘排列；
3、如何讓子元素混合排列。
box-ordinal-group:1; 規定某個元素排列的具體順序，這裡是排第一位。
4、子元素按比例分布顯示。
e:nth-of-type(1); 把父元素分成6分，不同的元素所佔的比例。
e:nth-of-type(2);
e:nth-of-type(3);
5、父元素的富裕空間的管理
box-pack:start; 子元素從左開始排列，父元素的多餘空間在右側
:end; 子元素從右開始排列，父元素的多餘空間在左側
:center; 子元素在空間的中部，多餘空間在兩邊
:justify;
詳解css3彈性盒模型（Flexbox）
今天剛學了css3的彈性盒模型，這是乙個可以讓你告別浮動 完美實現垂直水平居中的新特性。flexbox是布局模組，而不是乙個簡單的屬性，它包含父元素和子元素的屬性。flexbox布局的主體思想是似的元素可以改變大小以適應可用空間，當可用空間變大，flex元素將伸展大小以填充可用空間，當flex元素超...
css3 彈性盒模型
1.box flex 定義盒子的彈性空間 子元素的尺寸 盒子的尺寸 子元素的box flex屬性值 所有子元素的box flex屬性值的和 例題 中間寬度固定，兩側寬度自適應 box div nth of type 1 box div nth of type 2 box div nth of typ...
CSS3彈性盒模型
一.方向和順序 彈性盒子的內容可以以任何方向和順序布局，這使布局更簡單，其功能通過以下幾個屬性實現 1 flex direction 值為row 預設值 row reverse column column reverse，用於控制彈性盒子的內容在主軸上的放置方向。row 與當前的寫模式相同，例如 中...