css3中彈性盒排布使用方法

 首先，我們來對彈性盒中的稱呼做一些了解

#如圖，彈性盒分成兩個軸，一個是主軸，一個是交叉軸，主軸方向可以改變（左右改上下），主軸方向改變後，交叉軸方向也會隨之改變

然後，我們來看下瀏覽器的大概支持情況

從圖上可以看出，ie對於彈性盒的支援可以說是呵呵了，其他的瀏覽器還可以，迫於ie的坑，在pc上感覺就可以放棄這種佈局方案了，但是在行動端，從安卓2.1就開始支援（需要相容式寫法），所以在行動端，還是可以使用的，不過該加的前綴還是不能忘記的。

下邊我們來看看彈性盒的一些寫法

開啟彈性盒

#

display: flex;

 

兼容写法（IE10下版本不支持这属性）

#

display:-webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

 

定義子元素排列（主軸方向）

flex-direction: row;
row：水平方向从左到右(默认)
row-reverse：主轴从右到左
column：主轴从上到下
column-reverse：主轴从下到上

 相容式寫法

#

-webkit-box-orient:vertical;
-webkit-box-direction:normal;
-moz-box-orient:vertical;
-moz-box-direction:normal;
flex-direction:column;

定義子元素換行狀況  

flex-wrap：设置当前容器尺寸不足的情况下，项目是否换行显示。默认不可以换行显示。
nowarp：项目不换行显示（默认）
warp：项目换行显示，但是在第一行项目的下边。
warp-reverse：项目换行显示，但是在第一行项目的上边

 相容式寫法

#

-webkit-flex-wrap:wrap;
-webkit-box-lines:multiple;
-moz-flex-wrap:wrap;
flex-wrap:wrap;

這個是上面兩個屬性的合寫

flex-flow: row nowrap;

 相容式寫法

-webkit-flex-flow:row wrap;
-webkit-box-orient:horizontal;
-webkit-box-lines:multiple;
-moz-flex-flow:row wrap;
box-orient:horizontal;
box-lines:multiple;
flex-flow:row wrap;

橫向排列佈局

#

flex-start：主轴起始位置对齐
flex-end：主轴结束位置对齐
center：主轴居中对齐
space-between：主轴方向两端对齐，项目之间存在相等的间隔
space-around：主轴方向上的项目左右两端都有间隔，因此两端的项目间隔比中间的项目间隔小一半
justify-content:space-around;

相容式寫入法（IE11下版本不支援這屬性，其他瀏覽器要加前綴）

-webkit-justify-content:center;
justify-content:center;
-moz-box-pack:center;
-webkit--moz-box-pack:center;
box-pack:center;

#垂直排列佈局

flex-start：设置标签交叉轴的起始点对齐
flex-end：设置标签交叉轴的结束点对齐
center：设置标签交叉轴居中对齐
baseline：设置项目中第一行文本的基线对齐
stretch：设置项目的高度占满整个容器的高度（前提：项目的高度未指定）
align-items: baseline;

相容式寫法## #

align-items:center;
-webkit-align-items:center;
box-align:center;
-moz-box-align:center;
-webkit-box-align:center;

############伸縮盒子佈局###

flex:num;

###相容式寫入法###

box-flex:num;
-webkit-box-flex:num;
-moz-box-flex:num;
flex:num;
-webkit-flex:num;

###########元素出現順序###

<span style="color: #800000;">order:num;<br></span>

兼容写法

box-order:num;
-webkit-box-order:num;
-moz-box-order:num;
order:num;
-webkit-order:num;

############好了，大致上一些常用的屬性就這些，其實還有一些屬性，就不在這說了。 ###### ###

以上是css3中彈性盒排布使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！