盒子模型（Flexible Box） 屬性
| 屬性 | 說明 | CSS |
|---|---|---|
| box-align | 指定如何對齊一個框的子元素 | 3 |
| box-direction | 指定在哪個方向，顯示一個框的子元素 | 3 |
| box-flex | 指定一個框的子元素是否是靈活的或固定的大小 | 3 |
| box-flex-group | 指派靈活的元素到Flex組 | 3 |
| box-lines | 每當它在父框的空間運行時，是否指定將再上一個新的行列 | 3 |
| box-ordinal-group | 指定一個框的子元素的顯示順序 | 3 |
| box-orient | 指定一個框的子元素是否在水平或垂直方向應鋪設 | 3 |
| box-pack | 指定橫向盒在垂直框的水平位置和垂直位置 | 3 |
box-align屬性和box-pack屬性
-
box- align屬性指定box的子元素如何對齊。
值 說明 start 對於正常方向的boxes，每個子元素的頂部邊緣放在沿box的頂部。反向箱，每個子元素的底邊放在沿box的底部 end 對於正常方向的boxes，每個子元素的頂部邊緣放在沿box的底部。反向箱，每個子元素的底邊放在沿box的頂部 center 任何多余的空間被划分均勻，一半以上的子元素放在上面，剩下的子元素放在另一半 baseline 如果box-orient是內嵌單軸或橫向，所有的子元素都置於他們的基線對齊 stretch 子元素拉伸以填充包含區塊 -
box-pack屬性指定一個box的子元素時，被置於該框的子元素小於該框。
值 說明 start 對於普通方向的boxes，左邊緣的第一個子元素被放置在左側（所有額外的空間放置后的最后一個子元素）。對於反向boxes，右邊緣最后一個子元素放置在右側（所有額外的空間放置前的第一個子元素） end 對於正常的方向的boxes，最后一個子元素的右邊緣放置在右側（所有額外的空間放置前的第一個子元素）。對於反向boxes，第一個孩子的左邊緣放置在左側（所有額外的空間放置后的最后一個子元素） center 額外的空間划分均勻的兩半，前一半放置第一個子元素，另一半放置最后一個子元素 justify 額外的空間平均分配給每個子元素
舉例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型屬性</title>
<style>
div
{
width:350px;
height:100px;
border:1px solid black;
/* -webkit-box 支持：Safari, Chrome, and Opera */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
}
</style>
</head>
<body>
<div>
<p>Center me!</p>
</div>
</body>
</html>
Google 瀏覽器中打開，查看效果：
box-direction屬性
-
box-direction屬性指定顯示哪個方向的box的子元素。
值 描述 normal 以默認方向顯示子元素。 reverse 以反方向顯示子元素。 inherit 應該從子元素繼承 box-direction 屬性的值
舉例：
由右至左，顯示一個div box的子元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型屬性</title>
<style>
div
{
width:350px;
height:100px;
border:1px solid black;
/* -webkit-box 支持：Safari, Chrome, and Opera */
display:-webkit-box;
-webkit-box-direction:reverse;
}
</style>
</head>
<body>
<div>
<p>《Cat》</p>
<p>《Dog》</p>
<p>《Horse》</p>
</div>
</body>
</html>
Google 瀏覽器中打開，查看效果：
box-flex屬性
-
box-flex屬性指定box的子元素是否靈活或固定的大小。
值 描述 value 元素的靈活性。所有Flex都是相對的
舉例：
定義兩個靈活的p元素。如果父級box的總寬度為300px，＃P1將有一個100px的寬度，＃P2將有一個200px的寬度：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型屬性</title>
<style>
div {
/* -webkit-box 支持：Safari, Chrome, and Opera */
display:-webkit-box;
width:300px;
border:1px solid black;
}
#p1 {
/* -webkit-box 支持：Safari, Chrome, and Opera */
-webkit-box-flex:1.0;
box-flex:1.0;
border:1px solid red;
}
#p2 {
/* -webkit-box 支持：Safari, Chrome, and Opera */
-webkit-box-flex:2.0;
box-flex:2.0;
border:1px solid blue;
}
</style>
</head>
<body>
<div>
<p id="p1">Hello</p>
<p id="p2">CSS</p>
</div>
</body>
</html>
Google 瀏覽器中打開，查看效果：
box-ordinal-group屬性
box-ordinal-group屬性指定一個box的子元素的顯示順序。
舉例：
指定的一個box的子元素的顯示順序：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型屬性</title>
<style>
.box {
display:-webkit-box; /* -webkit-box支持 Safari and Chrome */
border:1px solid black;
}
.ord1 {
margin:5px;
-webkit-box-ordinal-group:1; /* -webkit-box支持 Safari and Chrome */
box-ordinal-group:1;
}
.ord2 {
margin:5px;
-webkit-box-ordinal-group:2; /* -webkit-box支持 Safari and Chrome */
box-ordinal-group:2;
}
</style>
</head>
<body>
<div class="box">
<div class="ord2">First in source</div>
<div class="ord1">Second in source</div>
<div class="ord1">Third in source</div>
</div>
</body>
</html>
Google 瀏覽器中打開，查看效果：
box-orient 屬性
box-orient 屬性指定一個box子元素是否應按水平或垂直排列。
| 值 | 說明 |
|---|---|
| horizontal | 指定子元素在一個水平線上從左至右排列 |
| vertical | 從頂部向底部垂直布置子元素 |
| inline-axis | 子元素沿着內聯坐標軸（映射到橫向） |
| block-axis | 子元素沿着塊坐標軸（映射到垂直） |
| inherit | box-orient 屬性的值應該從父元素繼承 |
舉例：
指定div元素的子元素橫向排列：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型屬性</title>
<style>
div {
width: 350px;
height: 100px;
border: 1px solid black;
/* -webkit-box支持 Safari and Chrome */
display: -webkit-box;
-webkit-box-orient: horizontal;
}
</style>
</head>
<body>
<div>
<p>《Cat》</p>
<p>《Dog》</p>
<p>《Horse》</p>
</div>
</body>
</html>
Google 瀏覽器中打開，查看效果：
