掌握傳統布局與css3新增彈性布局方式的實現和應用
彈性布局(彈性伸縮布局)
事實上它是一種新型別的盒子模型，也有書上稱作彈性伸縮盒布局。
彈性布局的主要思想是讓容器有能力來改變專案的寬度和高度，以填滿可用空間（主要是為了容納所有型別的顯示裝置和螢幕尺寸）的能力。應用恰當的彈性布局對使用者十分友好。頁面中所有元素可以隨著使用者的偏好縮放。
對於同時喜歡流動和定寬布局的設計師來說，彈性布局是完美的，因為前兩種布局的優點在彈性布局中都能找到。
需要花更多時間理解和測試，讓布局適合所有使用者。
這種布局型別相對於其他兩個更難製作
display: flex | inline-flex; (適用於父類容器元素上)
box：將物件作為彈性伸縮盒顯示。（伸縮盒最老版本）
inline-box：將物件作為內聯塊級彈性伸縮盒顯示。（伸縮盒最老版本）（css3）
flexbox：將物件作為彈性伸縮盒顯示。（伸縮盒過渡版本）
inline-flexbox：將物件作為內聯塊級彈性伸縮盒顯示。（伸縮盒過渡版本）
flex：將物件作為彈性伸縮盒顯示。
inline-flex：將物件作為內聯塊級彈性伸縮盒顯示。
css 多列（css columns）在彈性盒子中不起作用
flex-flow (適用於父類容器上)復合屬性。
設定或檢索伸縮盒物件的子元素排列方式。可以同時設定 flex-direction/flex-wrap
CSS3彈性布局flex
彈性盒子由彈性容器 flex container 和彈性子元素 flex item 組成。彈性容器通過設定 display 屬性的值為 flex 或 inline flex將其定義為彈性容器。彈性容器內包含了乙個或多個彈性子元素。注意 彈性容器外及彈性子元素內是正常渲染的。彈性盒子只定義了彈性子元素...
CSS3彈性盒布局
使用自適應的視窗彈性盒布局 可以使div總寬度等於瀏覽器寬度，而且可以隨著瀏覽器的改變而改變。12 zh cn 33536 container 37 left sidebar 示例文字，頁面中比較長的示例文字。示例文字，頁面中比較長的示例文字。示例文字，頁面中比較長的示例文字。示例文字，頁面中比較長...
Css3 彈性盒子布局
1 flex direction 指定了彈性容器中子元素的排列方式 row 橫向從左到右排列 左對齊 預設的排列方式 row reverse 反轉橫向排列 右對齊，從後往前排，最後一項排在最前面 column 縱向排列 column reverse 反轉縱向排列，從後往前排，最後一項排在最上面。2 ...