CSS3 彈性盒子(Flex Box)

CSS3 彈性盒(Flex Box)

彈性盒子是 CSS3 的一種新的佈局模式。

CSS3 彈性盒（ Flexible Box 或 flexbox），是一種當頁面需要適應不同的螢幕大小以及裝置類型時確保元素擁有恰當的行為的佈局方式。

引入彈性盒佈局模型的目的是提供一種更有效的方式來對一個容器中的子元素進行排列、對齊和分配空白空間。

CSS3 彈性盒子內容

彈性盒子由彈性容器(Flex container)和彈性子元素(Flex item)組成。

彈性容器透過設定 display 屬性的值為 flex 或 inline-flex將其定義為彈性容器。

彈性容器內包含了一個或多個彈性子元素。

註：彈性容器外及彈性子元素內是正常渲染的。彈性盒子只定義了彈性子元素如何在彈性容器內佈置。

彈性子元素通常在彈性盒子內一行顯示。預設情況每個容器只有一行。

以下元素展示了彈性子元素在一行內顯示，從左到右:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>  
</div>
</body>
</html>

下面將透過一個簡單的實例來講解舊版本的各個屬性：

<html>
<head>
<meta charset="utf-8">
<style>
p{
    width:150px;
    border:3px solid lightblue;
    background:lightgreen;
    padding:5px;
    margin:5px;
}
</style>
</head>
<body>
<div>
    <p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给</p>
    <p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给</p>
    <p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划</p>
</div>
</body>
</html>

上面結果很正常，在看看下面的例子：

<html>
<head>
<meta charset="utf-8">
<style>
p{
    width:150px;
    border:3px solid lightblue;
    background:lightgreen;
    padding:5px;
    margin:5px;
}
div{
    display:-webkit-box;
    display:box;
}
</style>
</head>
<body>
<div>
    <p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给</p>
    <p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给</p>
    <p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划</p>
</div>
</body>
</html>

看到了吧，現在每一個p元素都變成一個box了，這就是彈性佈局的神奇所在！

在上面中，我們將div元素的display設定為box，這就是舊版的彈性佈局。對於比較舊的瀏覽器版本，我們需要加上-webkit-前綴。

舊版的彈性佈局有兩個屬性值：

box : 將容器盒模型作為區塊級彈性伸縮盒顯示 inline-box : 將容器盒模型作為內聯級彈性伸縮盒子顯示

PS：我們知道區塊級它是佔用整行的，例如div元素；而內聯級不佔用整行，例如span元素。但是我們設置了整個盒子，他們都不佔用，保持一致。就像我們上面的例子一樣，給div元素設定了盒子，那麼div元素裡面的p元素就不佔用了。

box-orient 屬性

box-orient屬性主要實作盒子內部元素的流動方向。

div{
    display:-webkit-box;
    display:box;
    -webkit-box-orient:vertical;
    box-orient:vertical;
}

此時的結果就是垂直排列：

此屬性的屬性值有：

horizontal ：伸縮項目從左到右右水平排列 vertical ：伸縮項目由上到下垂直排列inline-axis ：伸縮項目沿著內聯軸排列顯示block-axis ：伸縮項目沿著塊軸排列顯示

#大家不妨試試：horizontal和inline-axis 都是水平排列，而vertical 和block-axis 都是垂直排列。

box-direction屬性

box-direction 屬性主要是設定伸縮容器中的流動順序。

div{
    display:-webkit-box;
    display:box;
    -webkit-box-direction:reverse;
    box-direction:reverse;
}

此屬性的屬性值有：

normal : 正常順序，預設值reverse : 反序

box-pack屬性

#box-pack屬性用於伸縮項目的分佈方式。

此屬性的屬性值有：

start : 伸縮項目以起始點靠齊 end : 伸縮項目以結束點靠齊center : 伸縮項目以中心點靠齊justify : 靠齊center : 伸縮項目以中心點靠齊justify : 靠齊center : 伸縮項目以中心點靠齊justify : 靠齊；平手分佈

下面我們都試試看各個屬性值的效果：

start屬性值：

div{
    -webkit-box-pack:start;
    box-pack:start;
}

2. end屬性值：

div{
    -webkit-box-pack:
end
;
    box-pack:
end
;
}

3.center屬性值：

div{
    -webkit-box-pack:
center
;
    box-pack:
center
;
}

4.justify屬性值：

div{
    -webkit-box-pack:
justify
;
    box-pack:
justify
;
}

PS:垂直方向上也是一樣的原理，但如果height為auto的話，效果將出不來。所以需要給height設定一個定高（最好比預設高）。這時，就能看到在垂直方向上的效果了。這裡我就不再贅述了。

box-align屬性

box-align 屬性用來處理伸縮容器的額外空間。

此屬性的屬性值有：

start ：伸縮項目以頂部為基準，清理下部額外空間 end ：伸縮項目以底部為基準，清理上部額外空間中部為基準，平均清理上下部額外空間baseline ：伸縮項目以基線為基準，清理額外的空間stretch ：伸縮項目填充整個容器，預設值

相同的，我們將試一下每個屬性值的效果：

1.start屬性值

div{
    display:-webkit-box;
    display:box;
    -webkit-box-align:start;
    box-align:start;
}

2.end屬性值

div{
    display:-webkit-box;
    display:box;
    -webkit-box-align:
end
;
    box-align:
end
;
}

3.center屬性值

div{
    display:-webkit-box;
    display:box;
    -webkit-box-align:
center
;
    box-align:
center
;
}

4.baseline屬性值

如果box-orient是內嵌單軸或橫向，所有的子元素都置於他們的基線對齊。

div{
    display:-webkit-box;
    display:box;
    -webkit-box-orient:horizontal;
    box-orient:horizontal;
    -webkit-box-align:baseline;
    box-align:baseline;
}

而如果box-orient是塊軸或垂直方向的，那麼所有的子元素都會居中垂直排列。

div{   
 display:-webkit-box;  
   display:box;  
     -webkit-box-orient:vertical;  
       box-orient:vertical;   
        -webkit-box-align:baseline;  
          box-align:baseline;
          }

5.stretch屬性值

所有子元素拉伸以填入包含區塊。

div{   
 display:-webkit-box;  
   display:box;  
     -webkit-box-align:stretch;    
             box-align:stretch
;}

box-flex屬性

box-flex 屬性可以使用浮點數分配伸縮項目的比例。此屬性是為容器內的項目設定的，它們會基於父容器的寬度來分配它們所佔的比例：

p:nth-child(1){
    -webkit-box-flex:1;
    box-flex:1;
}p:nth-child(2){
    -webkit-box-flex:3;
    box-flex:3;
}p:nth-child(3){
    -webkit-box-flex:1;
    box-flex:1;
}

當然也可以有些項目是固定寬度的，那麼其他的項目也會分配剩餘的寬度，例如這裡第一個p元素設定為固定寬度：

p:nth-child(2){
    -webkit-box-flex:2;
    box-flex:2;
}p:nth-child(3){
    -webkit-box-flex:1;
    box-flex:1;
}

更多使用情況，大家可以自己慢慢去嘗試。

box-ordinal-group 屬性

box-ordinal-group 屬性可以設定伸縮項目的顯示位置。

p:nth-child(1){
    -webkit-box-ordinal-group:2;
    box-ordinal-group:2;
}p:nth-child(2){
    -webkit-box-ordinal-group:3;
    box-ordinal-group:3;
}p:nth-child(3){
    -webkit-box-ordinal-group:1;
    box-ordinal-group:1;
}

可以看到：第一個p元素排在了第二，第二個p元素排在了第三，第三個p元素排在了第一。可以單獨給某一個p元素設定此屬性，其他項目會依照原來的順序做變動。

OK，那麼舊版的所有屬性就簡單的介紹完了，更多結合的用法還是根據需要自己多動手去練習一下。

這裡舉一個水平垂直居中的例子：

div{   
 display:-webkit-box;  
   display:box;   
    height:500px; 
       border:1px solid #f00; 
          -webkit-box-pack:center;  
            box-pack:center;   
             -webkit-box-align:center;  
               box-align:center;
               }

此時我們再給p元素設定一個固定的高度：

p{
    width:150px;
    height:200px;
}

CSS3 彈性盒子屬性

##表格列出了彈性盒子中常用的屬性:

屬性 ##display 指定中HTML 元素匣類型。

flex-direction 指定了彈性容器中子元素的排列方式

#justify-content 設定彈性盒子元素在主軸（橫軸）方向上的對齊方式。

align-items 設定側軸（縱軸）方向對齊的彈性盒子元素。

flex-wrap 設定彈性盒子的子元素超出父容器時是否已換行。

align-content 修改flex-wrap 屬性的行為，類似align-items, 但不是設定子元素對齊，而是設定行對齊

flex-flow 的簡寫

order 作用中設定彈性盒子中的子元素排列順序中。

align-self 使用且彈性元件上使用。覆蓋容器的 align-items 屬性。

flex 設為設定彈性盒子中的子元素中如何分配空間。

繼續學習

新建檔案

<html> <head> <meta charset="utf-8"> <style> p{ width:150px; border:3px solid lightblue; background:lightgreen; padding:5px; margin:5px; } div{ display:-webkit-box; display:box; } </style> </head> <body> <div> <p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给</p> <p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给</p> <p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划</p> </div> </body> </html>

重置程式碼

自動運行

提交

預覽 Clear