CSS3 彈性盒子
CSS3 彈性盒子(Flex Box)
彈性盒子是 CSS3 的一種新的布局模式。
CSS3 彈性盒( Flexible Box 或 flexbox),是一種當(dāng)頁(yè)面需要適應(yīng)不同的屏幕大小以及設(shè)備類型時(shí)確保元素?fù)碛星‘?dāng)?shù)男袨榈牟季址绞健?/p>
引入彈性盒布局模型的目的是提供一種更加有效的方式來(lái)對(duì)一個(gè)容器中的子元素進(jìn)行排列、對(duì)齊和分配空白空間。
瀏覽器支持
表格中的數(shù)字表示支持該屬性的第一個(gè)瀏覽器的版本號(hào)。
緊跟在數(shù)字后面的 -webkit- 或 -moz- 為指定瀏覽器的前綴。
CSS3 彈性盒子內(nèi)容
彈性盒子由彈性容器(Flex container)和彈性子元素(Flex item)組成。
彈性容器通過(guò)設(shè)置 display 屬性的值為 flex 或 inline-flex將其定義為彈性容器。
彈性容器內(nèi)包含了一個(gè)或多個(gè)彈性子元素。
注意: 彈性容器外及彈性子元素內(nèi)是正常渲染的。彈性盒子只定義了彈性子元素如何在彈性容器內(nèi)布局。
彈性子元素通常在彈性盒子內(nèi)一行顯示。默認(rèn)情況每個(gè)容器只有一行。
以下元素展示了彈性子元素在一行內(nèi)顯示,從左到右:
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <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>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
當(dāng)然我們可以修改排列方式。
如果我們?cè)O(shè)置 direction
屬性為 rtl
(right-to-left),彈性子元素的排列方式也會(huì)改變,頁(yè)面布局也跟著改變:
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <style> 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; } </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>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
flex-direction
flex-direction
順序指定了彈性子元素在父容器中的位置。
語(yǔ)法
flex-direction: row | row-reverse | column | column-reverse
flex-direction
的值有:
row:橫向從左到右排列(左對(duì)齊),默認(rèn)的排列方式。
row-reverse:反轉(zhuǎn)橫向排列(右對(duì)齊,從后往前排,最后一項(xiàng)排在最前面。
column:縱向排列。
column-reverse:反轉(zhuǎn)縱向排列,從后往前排,最后一項(xiàng)排在最上面。
以下實(shí)例演示了 row-reverse
的使用:
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <style> .flex-container { display: -webkit-flex; display: flex; -webkit-flex-direction: row-reverse; flex-direction: row-reverse; 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>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
以下實(shí)例演示了 column
的使用:
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <style> .flex-container { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; 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>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
以下實(shí)例演示了 column-reverse
的使用:
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <style> .flex-container { display: -webkit-flex; display: flex; -webkit-flex-direction: column-reverse; flex-direction: column-reverse; 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>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
justify-content 屬性
內(nèi)容對(duì)齊(justify-content)屬性應(yīng)用在彈性容器上,把彈性項(xiàng)沿著彈性容器的主軸線(main axis)對(duì)齊。
justify-content 語(yǔ)法如下:
justify-content: flex-start | flex-end | center | space-between | space-around
各個(gè)值解析:
flex-start:
彈性項(xiàng)目向行頭緊挨著填充。這個(gè)是默認(rèn)值。第一個(gè)彈性項(xiàng)的main-start外邊距邊線被放置在該行的main-start邊線,而后續(xù)彈性項(xiàng)依次平齊擺放。
flex-end:
彈性項(xiàng)目向行尾緊挨著填充。第一個(gè)彈性項(xiàng)的main-end外邊距邊線被放置在該行的main-end邊線,而后續(xù)彈性項(xiàng)依次平齊擺放。
center:
彈性項(xiàng)目居中緊挨著填充。(如果剩余的自由空間是負(fù)的,則彈性項(xiàng)目將在兩個(gè)方向上同時(shí)溢出)。
space-between:
彈性項(xiàng)目平均分布在該行上。如果剩余空間為負(fù)或者只有一個(gè)彈性項(xiàng),則該值等同于flex-start。否則,第1個(gè)彈性項(xiàng)的外邊距和行的main-start邊線對(duì)齊,而最后1個(gè)彈性項(xiàng)的外邊距和行的main-end邊線對(duì)齊,然后剩余的彈性項(xiàng)分布在該行上,相鄰項(xiàng)目的間隔相等。
space-around:
彈性項(xiàng)目平均分布在該行上,兩邊留有一半的間隔空間。如果剩余空間為負(fù)或者只有一個(gè)彈性項(xiàng),則該值等同于center。否則,彈性項(xiàng)目沿該行分布,且彼此間隔相等(比如是20px),同時(shí)首尾兩邊和彈性容器之間留有一半的間隔(1/2*20px=10px)。
效果圖展示:
以下實(shí)例演示了 flex-end
的使用:
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <style> .flex-container { display: -webkit-flex; display: flex; -webkit-justify-content: flex-end; justify-content: flex-end; 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>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
以下實(shí)例演示了 center
的使用:
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <style> .flex-container { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; 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>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
以下實(shí)例演示了 space-between
的使用:
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <style> .flex-container { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; 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>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
以下實(shí)例演示了 space-around
的使用:
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <style> .flex-container { display: -webkit-flex; display: flex; -webkit-justify-content: space-around; justify-content: space-around; 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>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
align-items 屬性
align-items
設(shè)置或檢索彈性盒子元素在側(cè)軸(縱軸)方向上的對(duì)齊方式。
語(yǔ)法
align-items: flex-start | flex-end | center | baseline | stretch
各個(gè)值解析:
flex-start:彈性盒子元素的側(cè)軸(縱軸)起始位置的邊界緊靠住該行的側(cè)軸起始邊界。
flex-end:彈性盒子元素的側(cè)軸(縱軸)起始位置的邊界緊靠住該行的側(cè)軸結(jié)束邊界。
center:彈性盒子元素在該行的側(cè)軸(縱軸)上居中放置。(如果該行的尺寸小于彈性盒子元素的尺寸,則會(huì)向兩個(gè)方向溢出相同的長(zhǎng)度)。
baseline:如彈性盒子元素的行內(nèi)軸與側(cè)軸為同一條,則該值與'flex-start'等效。其它情況下,該值將參與基線對(duì)齊。
stretch:如果指定側(cè)軸大小的屬性值為'auto',則其值會(huì)使項(xiàng)目的邊距盒的尺寸盡可能接近所在行的尺寸,但同時(shí)會(huì)遵照'min/max-width/height'屬性的限制。
以下實(shí)例演示了 stretch(默認(rèn)值)
的使用:
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <style> .flex-container { display: -webkit-flex; display: flex; -webkit-align-items: stretch; align-items: stretch; width: 400px; height: 250px; background-color: lightgrey; } .flex-item { background-color: cornflowerblue; width: 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>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
以下實(shí)例演示了 flex-start
的使用:
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <style> .flex-container { display: -webkit-flex; display: flex; -webkit-align-items: flex-start; align-items: flex-start; width: 400px; height: 250px; background-color: lightgrey; } .flex-item { background-color: cornflowerblue; width: 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>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
以下實(shí)例演示了 flex-end
的使用:
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <style> .flex-container { display: -webkit-flex; display: flex; -webkit-align-items: flex-end; align-items: flex-end; width: 400px; height: 250px; background-color: lightgrey; } .flex-item { background-color: cornflowerblue; width: 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>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
以下實(shí)例演示了 center
的使用:
實(shí)例
<!DOCTYPE html> <html> <head> <style> .flex-container { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; width: 400px; height: 250px; background-color: lightgrey; } .flex-item { background-color: cornflowerblue; width: 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>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
以下實(shí)例演示了 baseline
的使用:
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <style> .flex-container { display: -webkit-flex; display: flex; -webkit-align-items: baseline; align-items: baseline; width: 400px; height: 250px; background-color: lightgrey; } .flex-item { background-color: cornflowerblue; width: 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>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
flex-wrap 屬性
flex-wrap 屬性用于指定彈性盒子的子元素?fù)Q行方式。
語(yǔ)法
flex-flow: ||
各個(gè)值解析:
nowrap - 默認(rèn), 彈性容器為單行。該情況下彈性子項(xiàng)可能會(huì)溢出容器。
wrap - 彈性容器為多行。該情況下彈性子項(xiàng)溢出的部分會(huì)被放置到新行,子項(xiàng)內(nèi)部會(huì)發(fā)生斷行
wrap-reverse -反轉(zhuǎn) wrap 排列。
以下實(shí)例演示了 nowrap
的使用:
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <style> .flex-container { display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; width: 300px; 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>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
以下實(shí)例演示了 wrap
的使用:
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <style> .flex-container { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; width: 300px; 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>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
以下實(shí)例演示了 wrap-reverse
的使用:
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <style> .flex-container { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; width: 300px; 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>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
align-content 屬性
align-content
屬性用于修改 flex-wrap
屬性的行為。類似于 align-items
, 但它不是設(shè)置彈性子元素的對(duì)齊,而是設(shè)置各個(gè)行的對(duì)齊。
語(yǔ)法
align-content: flex-start | flex-end | center | space-between | space-around | stretch
各個(gè)值解析:
stretch
- 默認(rèn)。各行將會(huì)伸展以占用剩余的空間。flex-start
- 各行向彈性盒容器的起始位置堆疊。flex-end
- 各行向彈性盒容器的結(jié)束位置堆疊。center
-各行向彈性盒容器的中間位置堆疊。space-between
-各行在彈性盒容器中平均分布。space-around
- 各行在彈性盒容器中平均分布,兩端保留子元素與子元素之間間距大小的一半。
以下實(shí)例演示了 center
的使用:
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <style> .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-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>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
彈性子元素屬性
排序
語(yǔ)法
order:
各個(gè)值解析:
<integer>:用整數(shù)值來(lái)定義排列順序,數(shù)值小的排在前面??梢詾樨?fù)值。
order
屬性設(shè)置彈性容器內(nèi)彈性子元素的屬性:
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <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; } .first { -webkit-order: -1; order: -1; } </style> </head> <body> <div class="flex-container"> <div class="flex-item">flex item 1</div> <div class="flex-item first">flex item 2</div> <div class="flex-item">flex item 3</div> </div> </body> </html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
對(duì)齊
設(shè)置"margin"值為"auto"值,自動(dòng)獲取彈性容器中剩余的空間。所以設(shè)置垂直方向margin值為"auto",可以使彈性子元素在彈性容器的兩上軸方向都完全集中。
以下實(shí)例在第一個(gè)彈性子元素上設(shè)置了 margin-right: auto;
。 它將剩余的空間放置在元素的右側(cè):
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <style> .flex-container { display: -webkit-flex; display: flex; width: 400px; height: 250px; background-color: lightgrey; } .flex-item { background-color: cornflowerblue; width: 75px; height: 75px; margin: 10px; } .flex-item:first-child { margin-right: auto; } </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>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
完美的居中
以下實(shí)例將完美解決我們平時(shí)碰到的居中問(wèn)題。
使用彈性盒子,居中變的很簡(jiǎn)單,只想要設(shè)置 margin: auto;
可以使得彈性子元素在兩上軸方向上完全居中:
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <style> .flex-container { display: -webkit-flex; display: flex; width: 400px; height: 250px; background-color: lightgrey; } .flex-item { background-color: cornflowerblue; width: 75px; height: 75px; margin: auto; } </style> </head> <body> <div class="flex-container"> <div class="flex-item">Perfect centering!</div> </div> </body> </html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
align-self
align-self
屬性用于設(shè)置彈性元素自身在側(cè)軸(縱軸)方向上的對(duì)齊方式。
語(yǔ)法
align-self: auto | flex-start | flex-end | center | baseline | stretch
各個(gè)值解析:
auto:如果'align-self'的值為'auto',則其計(jì)算值為元素的父元素的'align-items'值,如果其沒(méi)有父元素,則計(jì)算值為'stretch'。
flex-start:彈性盒子元素的側(cè)軸(縱軸)起始位置的邊界緊靠住該行的側(cè)軸起始邊界。
flex-end:彈性盒子元素的側(cè)軸(縱軸)起始位置的邊界緊靠住該行的側(cè)軸結(jié)束邊界。
center:彈性盒子元素在該行的側(cè)軸(縱軸)上居中放置。(如果該行的尺寸小于彈性盒子元素的尺寸,則會(huì)向兩個(gè)方向溢出相同的長(zhǎng)度)。
baseline:如彈性盒子元素的行內(nèi)軸與側(cè)軸為同一條,則該值與'flex-start'等效。其它情況下,該值將參與基線對(duì)齊。
stretch:如果指定側(cè)軸大小的屬性值為'auto',則其值會(huì)使項(xiàng)目的邊距盒的尺寸盡可能接近所在行的尺寸,但同時(shí)會(huì)遵照'min/max-width/height'屬性的限制。
以下實(shí)例演示了彈性子元素上 align-self 不同值的應(yīng)用效果:
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <style> .flex-container { display: -webkit-flex; display: flex; width: 400px; height: 250px; background-color: lightgrey; } .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; } </style> </head> <body> <div class="flex-container"> <div class="flex-item item1">flex-start</div> <div class="flex-item item2">flex-end</div> <div class="flex-item item3">center</div> <div class="flex-item item4">baseline</div> <div class="flex-item item5">stretch</div> </div> </body> </html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
flex
flex
屬性用于指定彈性子元素如何分配空間。
語(yǔ)法
flex:none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]
各個(gè)值解析:
none:none關(guān)鍵字的計(jì)算值為: 0 0 auto
[ flex-grow ]:定義彈性盒子元素的擴(kuò)展比率。
[ flex-shrink ]:定義彈性盒子元素的收縮比率。
[ flex-basis ]:定義彈性盒子元素的默認(rèn)基準(zhǔn)值。
以下實(shí)例中,第一個(gè)彈性子元素占用了 2/4 的空間,其他兩個(gè)各占 1/4 的空間:
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <style> .flex-container { display: -webkit-flex; display: flex; width: 400px; height: 250px; background-color: lightgrey; } .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; } </style> </head> <body> <div class="flex-container"> <div class="flex-item item1">flex item 1</div> <div class="flex-item item2">flex item 2</div> <div class="flex-item item3">flex item 3</div> </div> </body> </html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
更多實(shí)例
使用彈性盒子創(chuàng)建響應(yīng)式頁(yè)面
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .flex-container { display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; flex-flow: row wrap; &