最新的Web開發教程
 

CSS3 Flexible Box

❮上一頁 下一頁章❯

CSS3 Flexbox

靈活的框或flexbox ，是CSS3新的佈局模式。

使用flexbox保證行為的元素時，可預見的頁面佈局必須適應不同的屏幕尺寸和不同的顯示設備。

對於許多應用，靈活的盒子模型提供了超過在於它不使用花車，也不符合其內容的利潤率做Flex容器的利潤率崩潰塊模型的改進。

瀏覽器支持

在表中的數字指定完全支持特徵的第一瀏覽器的版本。

其次是數字-webkit-或-moz-指定用一個前綴工作的第一個版本。

屬性
Basic support
(single-line flexbox)		 29.0
21.0 -webkit-		 11.0 22.0
18.0 -moz-		 6.1 -webkit- 12.1 -webkit-
Multi-line flexbox 29.0
21.0 -webkit-		 11.0 28.0 6.1 -webkit- 17.0
15.0 -webkit-
12.1

CSS3 Flexbox概念

Flexbox由Flex容器和Flex項目。

柔性容器是由設置聲明display的元素的屬性，以任一flex （呈現為一個塊）或inline-flex （呈現為內置）。

內的柔性容器有一個或更多個柔性物品。

注：Flex容器外柔性項目內的所有內容呈現如常。 Flexbox的定義如何彎曲項的Flex容器內都擺出來。

Flex的項目位於沿柔性線柔性容器內。 默認只有一個每柔性容器彎曲線。

下面的例子顯示了三個彎曲的物品。 它們被定位在默認情況下：沿水平彎曲線，從左至右依次為：

例

<!DOCTYPE html>
<html>
<head>
<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>

試一試»

另外，也可以改變彎曲線的方向。

如果我們設定的direction屬性rtl （從右到左），繪製文本從右向左，也是柔性線改變方向，這將改變頁面佈局：

例

body {
    direction: rtl;
}

.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;
}

試一試»

Flex的方向

在flex-direction屬性指定柔性容器內的柔性物品的方向。 的默認值flex-direction是row （左到右，頂部至底部）。

其他的值如下：

  • row-reverse -如果寫入模式（方向）被左到右，撓性件將被佈置從右到左
  • column -如果書寫系統是水平的，柔性的項目將被垂直佈置
  • column-reverse -同列，但逆轉

下面的例子顯示使用的結果row-reverse值：

例

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

試一試»

下面的例子顯示使用的結果column值：

例

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

試一試»

下面的例子顯示使用的結果column-reverse值：

例

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

試一試»

該證明內容屬性

該justify-content屬性水平對齊靈活容器的物品時，物品不使用主軸的所有可用空間。

可能的值如下：

  • flex-start -默認值。 件被定位在容器的開頭
  • flex-end -物品被定位在容器的端部
  • center -物品被定位在容器的中心
  • space-between -物品被定位為與線之間的空間
  • space-around -物品被定位空間之前，之間以及線之後

下面的例子顯示使用的結果flex-end的價值：

例

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

試一試»

下面的例子顯示使用的結果， center值：

例

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

試一試»

下面的例子顯示使用的結果space-between的價值：

例

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

試一試»

下面的例子顯示使用的結果space-around價值：

例

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

試一試»

對齊項物業

所述align-items屬性垂直對齊柔性容器的物品時，物品不使用對交叉軸的所有可用空間。

可能的值如下：

  • stretch -默認值。 項目被拉伸以適應集裝箱
  • flex-start -物品被定位在容器的頂部
  • flex-end -物品被定位在容器的底部
  • center -物品被定位在容器的中心（垂直地）
  • baseline -物品被定位在容器的基線

下面的例子顯示使用的結果stretch值（這是默認值）：

例

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: stretch;
    align-items: stretch;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

試一試»

下面的例子顯示使用的結果flex-start值：

例

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

試一試»

下面的例子顯示使用的結果flex-end的價值：

例

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-end;
    align-items: flex-end;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

試一試»

下面的例子顯示使用的結果， center值：

例

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

試一試»

下面的例子顯示使用的結果baseline值：

例

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: baseline;
    align-items: baseline;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

試一試»

在柔性包裝物業

所述flex-wrap屬性指定柔性物品是否應該包裹與否，如果沒有足夠的空間，其中在一個柔性線路。

可能的值如下：

  • nowrap -默認值。 靈活的項目將不換
  • wrap -靈活的項目將包裝如有必要，
  • wrap-reverse -柔性物品將包裝，如果需要的話，以相反的順序

下面的例子顯示使用的結果nowrap值（這是默認值）：

例

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    width: 300px;
    height: 250px;
    background-color: lightgrey;
}

試一試»

下面的例子顯示使用的結果wrap值：

例

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 300px;
    height: 250px;
    background-color: lightgrey;
}

試一試»

下面的例子顯示使用的結果wrap-reverse值：

例

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap-reverse;
    flex-wrap: wrap-reverse;
    width: 300px;
    height: 250px;
    background-color: lightgrey;
}

試一試»

對齊內容屬性

該align-content屬性修改的行為flex-wrap特性。 它類似於align-items ，但不是對準柔性物品，它對準彎曲線。

可能的值如下：

  • stretch -默認值。 線路延伸到佔用的剩餘空間
  • flex-start -線路都擠滿朝著柔性容器的開始
  • flex-end -線條都擠滿朝著柔性容器的結束
  • center -線條都擠滿朝著柔性容器的中央
  • space-between -線條均勻地分佈在Flex容器
  • space-around -線條均勻地分佈在Flex容器，用半角空格的兩端

下面的例子顯示使用的結果， center值：

例

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-content: center;
    align-content: center;
    width: 300px;
    height: 300px;
    background-color: lightgrey;
}

試一試»

Flex的項目屬性

訂購

該order屬性指定靈活相對於同一容器內的柔性物品的其餘部分項目的順序：

例

.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}

.first {
    -webkit-order: -1;
    order: -1;
}

試一試»

餘量

設定margin: auto;會吸收多餘的空間。 它可用於撓曲件推入不同的位置。

在下面的例子中，我們設置margin-right: auto;第一個柔性的項目。 這將導致所有額外的空間被吸收到該元素的權利：

例

.flex-item {
    background-color: cornflowerblue;
    width: 75px;
    height: 75px;
    margin: 10px;
}

.flex-item:first-child {
    margin-right: auto;
}

試一試»

完美的定心

在下面的例子中，我們將解決幾乎每天都有的問題：完美的定心。

這是很容易與Flexbox的。 設定margin: auto;會在這兩個軸完全集中的項目：

例

.flex-item {
    background-color: cornflowerblue;
    width: 75px;
    height: 75px;
    margin: auto;
}

試一試»

調整自

該align-self柔性物品屬性將覆蓋柔性容器的該項目對齊項屬性。 它具有相同的可能值作為align-items屬性。

以下示例設置不同的對齊自我價值到每個彎曲項目：

例

.flex-item {
    background-color: cornflowerblue;
    width: 60px;
    min-height: 100px;
    margin: 10px;
}

.item1 {
    -webkit-align-self: flex-start;
    align-self: flex-start;
}
.item2 {
    -webkit-align-self: flex-end;
    align-self: flex-end;
}

.item3 {
    -webkit-align-self: center;
    align-self: center;
}

.item4 {
    -webkit-align-self: baseline;
    align-self: baseline;
}

.item5 {
    -webkit-align-self: stretch;
    align-self: stretch;
}

試一試»

柔性

的flex屬性指定柔性物品的相對於相同的容器內的柔性物品的其餘部分的長度，。

在下面的例子中，第一撓曲項目會消耗的自由空間的2/4，而另外兩個柔性物品會消耗每個自由空間的1/4：

例

.flex-item {
    background-color: cornflowerblue;
    margin: 10px;
}

.item1 {
    -webkit-flex: 2;
    flex: 2;
}

.item2 {
    -webkit-flex: 1;
    flex: 1;
}

.item3 {
    -webkit-flex: 1;
    flex: 1;
}

試一試»

例子

更多示例

創建一個負責任的網站，Flexbox的
這個例子演示了如何創建一個Flexbox的響應網站佈局。

CSS3 Flexbox的屬性

下表列出了Flexbox的使用的CSS屬性：

Property Description
display Specifies the type of box used for an HTML element
flex-direction Specifies the direction of the flexible items inside a flex container
justify-content Horizontally aligns the flex items when the items do not use all available space on the main-axis
align-items Vertically aligns the flex items when the items do not use all available space on the cross-axis
flex-wrap Specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line
align-content Modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines
flex-flow A shorthand propert for flex-direction and flex-wrap
order Specifies the order of a flexible item relative to the rest of the flex items inside the same container
align-self Used on flex items. Overrides the container's align-items property
flex Specifies the length of a flex item, relative to the rest of the flex items inside the same container

❮上一頁 下一頁章❯