CSS3 彈性盒子(Flex Box)

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

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

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

瀏覽器支持

表格中的數字表示支持該屬性的第一個瀏覽器的版本號。

緊跟在數字后面的 -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 彈性盒子內容

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

彈性容器通過設置 display 屬性的值為 flex 或 inline-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(right-to-left),彈性子元素的排列方式也會改變，頁面布局也跟著改變:

實例

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-direction

flex-direction順序指定了彈性子元素在父容器中的位置。

語法

flex-direction:rowrow-reversecolumncolumn-reverse

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 屬性

內容對齊（justify-content）屬性應用在彈性容器上，把彈性項沿著彈性容器的主軸線（main axis，也可理解為橫軸）對齊。

內容對齊可以理解為彈性盒子的Y軸坐標不變，盒子只會有X軸的變化，所以實際上內容對齊用于設置列對齊。像flex-start效果就有點像左對齊。

justify-content 語法如下：

justify-content:flex-startflex-endcenterspace-betweenspace-around

各個值解析:

flex-start：
彈性項目向行頭緊挨著填充。這個是默認值。第一個彈性項的main-start外邊距邊線被放置在該行的main-start邊線，而后續彈性項依次平齊擺放。
flex-end：
彈性項目向行尾緊挨著填充。第一個彈性項的main-end外邊距邊線被放置在該行的main-end邊線，而后續彈性項依次平齊擺放。
center：
彈性項目居中緊挨著填充。（如果剩余的自由空間是負的，則彈性項目將在兩個方向上同時溢出）。
space-between：
彈性項目平均分布在該行上。如果剩余空間為負或者只有一個彈性項，則該值等同于flex-start。否則，第1個彈性項的外邊距和行的main-start邊線對齊，而最后1個彈性項的外邊距和行的main-end邊線對齊，然后剩余的彈性項分布在該行上，相鄰項目的間隔相等。
space-around：
彈性項目平均分布在該行上，兩邊留有一半的間隔空間。如果剩余空間為負或者只有一個彈性項，則該值等同于center。否則，彈性項目沿該行分布，且彼此間隔相等（比如是20px），同時首尾兩邊和彈性容器之間留有一半的間隔（1/2*20px=10px）。

效果圖展示：

以下實例演示了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 屬性

align-items （項目對齊）設置或檢索彈性盒子元素在側軸（縱軸）方向上的對齊方式。

項目對齊可以理解為彈性盒子的X軸坐標不變，盒子只會有Y軸的變化，所以實際上內容對齊用于設置行對齊。
align-items屬性可以理解為縱向的justify-content
像center效果就是垂直方向的居中。

語法

align-items:flex-startflex-endcenterbaselinestretch

各個值解析:

flex-start：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。
flex-end：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。
center：彈性盒子元素在該行的側軸（縱軸）上居中放置。（如果該行的尺寸小于彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度）。
baseline：如彈性盒子元素的行內軸與側軸為同一條，則該值與'flex-start'等效。其它情況下，該值將參與基線對齊。
stretch：如果指定側軸大小的屬性值為'auto'，則其值會使項目的邊距盒的尺寸盡可能接近所在行的尺寸，但同時會遵照'min/max-width/height'屬性的限制。

以下實例演示了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 屬性

flex-wrap屬性用于指定彈性盒子的子元素換行方式。

語法

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

各個值解析:

nowrap- 默認，彈性容器為單行。該情況下彈性子項可能會溢出容器。
wrap- 彈性容器為多行。該情況下彈性子項溢出的部分會被放置到新行，子項內部會發生斷行
wrap-reverse-反轉 wrap 排列。

以下實例演示了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 屬性

align-content屬性用于修改flex-wrap屬性的行為。類似于align-items, 但它不是設置彈性子元素的對齊，而是設置各個行的對齊。

語法

align-content:flex-startflex-endcenterspace-betweenspace-aroundstretch

各個值解析:

stretch- 默認。各行將會伸展以占用剩余的空間。
flex-start- 各行向彈性盒容器的起始位置堆疊。
flex-end- 各行向彈性盒容器的結束位置堆疊。
center-各行向彈性盒容器的中間位置堆疊。
space-between-各行在彈性盒容器中平均分布。
space-around- 各行在彈性盒容器中平均分布，兩端保留子元素與子元素之間間距大小的一半。

以下實例演示了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;
}

彈性子元素屬性

排序

語法

order:

各個值解析:

<integer>：沒有設置order屬性的順序值默認為0.
負值在前，然后默認為0，正值最后，順序值越小越在前面

order屬性設置彈性容器內彈性子元素的屬性:

實例

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

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

對齊

設置"margin"值為"auto"值，自動獲取彈性容器中剩余的空間。所以設置垂直方向margin值為"auto"，可以使彈性子元素在彈性容器的兩上軸方向都完全集中。

以下實例在第一個彈性子元素上設置了margin-right: auto;。它將剩余的空間放置在元素的右側：

實例

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

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

完美的居中

以下實例將完美解決我們平時碰到的居中問題。

使用彈性盒子，居中變的很簡單，只想要設置margin: auto;可以使得彈性子元素在兩上軸方向上完全居中:

實例

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

align-self

align-self屬性用于設置彈性元素自身在側軸（縱軸）方向上的對齊方式。

語法

align-self:autoflex-startflex-endcenterbaselinestretch

各個值解析:

auto：如果'align-self'的值為'auto'，則其計算值為元素的父元素的'align-items'值，如果其沒有父元素，則計算值為'stretch'。
flex-start：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。
flex-end：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。
center：彈性盒子元素在該行的側軸（縱軸）上居中放置。（如果該行的尺寸小于彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度）。
baseline：如彈性盒子元素的行內軸與側軸為同一條，則該值與'flex-start'等效。其它情況下，該值將參與基線對齊。
stretch：如果指定側軸大小的屬性值為'auto'，則其值會使項目的邊距盒的尺寸盡可能接近所在行的尺寸，但同時會遵照'min/max-width/height'屬性的限制。

以下實例演示了彈性子元素上 align-self 不同值的應用效果：

實例

.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

flex屬性用于指定彈性子元素如何分配空間。

語法

flex：none[flex-grow][flex-shrink][flex-basis]

各個值解析:

none：none關鍵字的計算值為: 0 0 auto
[ flex-grow ]：定義彈性盒子元素的擴展比率。
[ flex-shrink ]：定義彈性盒子元素的收縮比率。
[ flex-basis ]：定義彈性盒子元素的默認基準值。

以下實例中，第一個彈性子元素占用了 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;
}

更多實例

使用彈性盒子創建響應式頁面

CSS3 彈性盒子屬性

下表列出了在彈性盒子中常用到的屬性:

屬性	描述
display	指定 HTML 元素盒子類型。
flex-direction	指定了彈性容器中子元素的排列方式
justify-content	設置彈性盒子元素在主軸（橫軸）方向上的對齊方式。
align-items	設置彈性盒子元素在側軸（縱軸）方向上的對齊方式。
flex-wrap	設置彈性盒子的子元素超出父容器時是否換行。
align-content	修改 flex-wrap 屬性的行為，類似align-items, 但不是設置子元素對齊，而是設置行對齊
flex-flow	flex-direction 和 flex-wrap 的簡寫
order	設置彈性盒子的子元素排列順序。
align-self	在彈性子元素上使用。覆蓋容器的 align-items 屬性。
flex	設置彈性盒子的子元素如何分配空間。

? Previous Next ?

欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

CSS3教程

CSS3 彈性盒子(Flex Box)

瀏覽器支持

CSS3 彈性盒子內容

實例

實例

flex-direction

語法

實例

實例

實例

justify-content 屬性

實例

實例

實例

實例

align-items 屬性

語法

實例

實例

實例

實例

實例

flex-wrap 屬性

語法

實例

實例

實例

align-content 屬性

語法

實例

彈性子元素屬性

排序

語法

實例

對齊

實例

完美的居中

實例

align-self

語法

實例

flex

語法

實例

CSS3 彈性盒子屬性