在做手機頁面開發中，一直使用彈性盒子布局，這種布局簡單快速，且在手機端已經不用擔心相容性問題，
display:box和display:flex還是有一定差異性，本篇文章只講解box。父容器上設定box屬性
在父容器上設定
display: box;
webkit核心的瀏覽器，必須加上-webkit字首。
display: -webkit-box;
預設情況下,子容器會從左到右水平排列
box-orient: vertical;
設定該屬性可以使子容器從上到下垂直排列
box-direction: reverse;
子容器在水平方向從右向左(就是說最右邊的元素排在最左邊),垂直方向從下向上(最下面的在最上面)
box-align: start | end | center | stretch
父容器水平排列下 start:上,center:中,end:下,stretch:子容器不設定高度或高度為auto時,子容器會拉伸的和父容器一樣高,設定高度同start
父容器垂直排列下 start:左,center:中,end:右,stretch:子容器不設定寬度或寬度為auto時,子容器會拉伸的和父容器一樣寬,設定寬度同start
box-pack: start | end | center | justify
父容器水平排列下 start:左,center:中,end:右,justify:水平等分父容器寬度
父容器垂直排列下 start:上,center:中,end:下,justify:水平等分父容器高度
子容器上設定box-flex屬性
box-flex: 1;
定義子容器佔的比例, 具體計算規則,父容器-定寬,剩餘的按比例等分。
但實際計算中並沒有實現等分(子容器中還有元素時),常用的解決方法是,
新增寬度百分比和box-sizing: border-box;（解決border和padding問題）
.bf-2
.bf-1
這樣可以實現bf-2是bf-1的2倍
不建議width是乙個數值和box-flex一起使用
具體例子html
123
.box
.item1
.item2
.item3
flex彈性盒子,,彈性盒子布局
flex 彈性 布局 2009年w3c推出flex布局.可以簡便,完整,響應式的實現各種網頁布局 ie10 以往的網頁布局 layout 方式 基於盒模型,依賴display屬性 margin屬性 position屬性 float屬性特殊布局比較麻煩 比如元素的垂直居中 一.flex是什麼?flex...
彈性盒子（flexible box
將父元素盒子變為彈性盒子的方法 加display webkitt box 瀏覽器或設定為其他，box也可設定為inline box horizontal 設子元素為水平排列 預設 vertical 子元素為縱向排列start 子元素從開始位置對齊 大部分情況等同於左對齊 center 子元素居中對齊...
css彈性盒子
css3 彈性盒子 flexible box 或 flexbox 是一種 用於在頁面上布置元素的 布局模式，使得當頁面布局必須適應不同的螢幕尺寸和不同的顯示裝置時，元素可 地執行。對於許多應用程式，彈性盒子模型提供了對塊模型的改進，因為它不使用浮動，flex容器的邊緣也不會與其內容的邊緣摺疊。css...