實例

水平排列 div 元素的子元素：

div { width:350px; height:100px; border:1px solid black;/* Firefox */ display:-moz-box; -moz-box-orient:horizontal;/* Safari、Opera 以及 Chrome */ display:-webkit-box; -webkit-box-orient:horizontal;/* W3C */ display:box; box-orient:horizontal; }

親自試一試

瀏覽器支持

目前沒有瀏覽器支持 box-orient 屬性。

Firefox 支持替代的 -moz-box-orient 屬性。

Safari、Opera 以及 Chrome 支持替代的 -webkit-box-orient 屬性。

定義和用法

box-orient 屬性規(guī)定框的子元素應該被水平或垂直排列。

提示：水平框中的子元素從左向右進行顯示，而垂直框的子元素從上向下進行顯示。不過，box-direction 和 box-ordinal-group 能夠改變這種順序。

默認值： 繼承性： 版本： JavaScript 語法：

inline-axis

no

CSS3

object.style.boxOrient="vertical"

語法

box-orient: horizontal|vertical|inline-axis|block-axis|inherit; 值 描述 測試

horizontal	在水平行中從左向右排列子元素。	測試
vertical	從上向下垂直排列子元素。	測試
inline-axis	沿著行內軸來排列子元素（映射為 horizontal）。	測試
block-axis	沿著塊軸來排列子元素（映射為 vertical）。	測試
inherit	應該從父元素繼承 box-orient 屬性的值。	?

實例

以反方向顯示 div 框的子元素：

div { width:350px; height:100px; border:1px solid black;/* Firefox */ display:-moz-box; -moz-box-direction:reverse;/* Safari、Opera 以及 Chrome */ display:-webkit-box; -webkit-box-direction:reverse;/* W3C */ display:box; box-direction:reverse; }

親自試一試

瀏覽器支持

目前沒有瀏覽器支持 box-direction 屬性。

Firefox 支持替代的 -moz-box-direction 屬性。

Safari、Opera 以及 Chrome 支持替代的 -webkit-box-direction 屬性。

定義和用法

box-direction 屬性規(guī)定框元素的子元素以什么方向來排列。

默認值： 繼承性： 版本： JavaScript 語法：

normal

no

CSS3

object.style.boxDirection="reverse"

語法

box-direction: normal|reverse|inherit; 值 描述 測試

normal	以默認方向顯示子元素。	測試
reverse	以反方向顯示子元素。	測試
inherit	應該從子元素繼承 box-direction 屬性的值	?

實例

通過使用 box-align and box-pack 屬性，居中 div 框的子元素：

div { width:350px; height:100px; border:1px solid black;/* Firefox */ display:-moz-box; -moz-box-pack:center; -moz-box-align:center;/* Safari、Opera 以及 Chrome */ display:-webkit-box; -webkit-box-pack:center; -webkit-box-align:center;/* W3C */ display:box; box-pack:center; box-align:center; }

親自試一試

頁面底部有更多實例。

瀏覽器支持

目前沒有瀏覽器支持 box-align 屬性。

Firefox 支持替代的 -moz-box-align 屬性。

Safari、Opera 以及 Chrome 支持替代的 -webkit-box-align 屬性。

定義和用法

box-align 屬性規(guī)定如何對齊框的子元素。

默認值： 繼承性： 版本： JavaScript 語法：

stretch

no

CSS3

object.style.boxAlign="center"

語法

box-align: start|end|center|baseline|stretch; 值 描述 測試

start	對于正常方向的框，每個子元素的上邊緣沿著框的頂邊放置。 對于反方向的框，每個子元素的下邊緣沿著框的底邊放置。	測試
end	對于正常方向的框，每個子元素的下邊緣沿著框的底邊放置。 對于反方向的框，每個子元素的上邊緣沿著框的頂邊放置。	測試
center	均等地分割多余的空間，一半位于子元素之上，另一半位于子元素之下。	測試
baseline	如果 box-orient 是inline-axis或horizontal，所有子元素均與其基線對齊。	測試
stretch	拉伸子元素以填充包含塊

實例

定義兩個可伸縮的 p 元素。如果父元素的總寬度是 300 像素，則 #p1 的寬度是 100 像素，而 #p2 的寬度是 200 像素：

#p1 { -moz-box-flex:1.0; /* Firefox */ -webkit-box-flex:1.0; /* Safari 和 Chrome */ box-flex:1.0; border:1px solid red; }#p2 { -moz-box-flex:2.0; /* Firefox */ -webkit-box-flex:2.0; /* Safari 和 Chrome */ box-flex:2.0; border:1px solid blue; }

親自試一試

瀏覽器支持

目前沒有瀏覽器支持 box-flex 屬性。

Firefox 支持替代的 -moz-box-flex 屬性。

Safari、Opera 以及 Chrome 支持替代的 -webkit-box-flex 屬性。

定義和用法

box-flex 屬性規(guī)定框的子元素是否可伸縮其尺寸。

提示：可伸縮元素能夠隨著框的縮小或擴大而縮寫或放大。只要框中有多余的空間，可伸縮元素就會擴展來填充這些空間。

默認值： 繼承性： 版本： JavaScript 語法：

0.0（指示該元素不可伸縮）

no

CSS3

object.style.boxFlex=2.0

語法

box-flex: value; 值 描述

value	元素的可伸縮行。柔性是相對的，例如 box-flex 為 2 的子元素兩倍于 box-flex 為 1 的子元素。

實例

通過一起使用 box-align 和 box-pack 屬性，對 div 框的子元素進行居中：

div { width:350px; height:100px; border:1px solid black;/* Firefox */ display:-moz-box; -moz-box-pack:center; -moz-box-align:center;/* Safari、Opera 以及 Chrome */ display:-webkit-box; -webkit-box-pack:center; -webkit-box-align:center;/* W3C */ display:box; box-pack:center; box-align:center; }

親自試一試

瀏覽器支持

目前沒有瀏覽器支持 box-pack 屬性。

Firefox 支持替代的 -moz-box-pack 屬性。

Safari、Opera 以及 Chrome 支持替代的 -webkit-box-pack 屬性。

定義和用法

box-pack 屬性規(guī)定當框大于子元素的尺寸，在何處放置子元素。

該屬性規(guī)定水平框中的水平位置，以及垂直框中的垂直位置。

默認值： 繼承性： 版本： JavaScript 語法：

start

no

CSS3

object.style.boxPack="center"

語法

box-pack: start|end|center|justify; 值 描述 測試

start	對于正常方向的框，首個子元素的左邊緣被放在左側（最后的子元素后是所有剩余的空間） 對于相反方向的框，最后子元素的右邊緣被放在右側（首個子元素前是所有剩余的空間）	測試
end	對于正常方向的框，最后子元素的右邊緣被放在右側（首個子元素前是所有剩余的空間）。 對于相反方向的框，首個子元素的左邊緣被放在左側（最后子元素后是所有剩余的空間）。	測試
center	均等地分割多余空間，其中一半空間被置于首個子元素前，另一半被置于最后一個子元素后	測試
justify	在每個子元素之間分割多余的空間（首個子元素前和最后一個子元素后沒有多余的空間）。	測試

總結

以上是生活随笔為你收集整理的CSS3 box-orient box-direction box-align box-flex box-pack的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。