CSS3 彈性盒子(Flex Box)

2022-05-26 16:04 更新

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

CSS3 彈性盒（ Flexible Box 或 flexbox），是一種當(dāng)頁(yè)面需要適應(yīng)不同的屏幕大小以及設(shè)備類型時(shí)確保元素?fù)碛星‘?dāng)?shù)男袨榈牟季址绞健?

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

瀏覽器支持

表格中的數(shù)字表示支持該屬性的第一個(gè)瀏覽器的版本號(hào)。

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

嘗試一下 ?

當(dāng)然我們可以修改排列方式。

如果我們?cè)O(shè)置 direction 屬性為 rtl (right-to-left),彈性子元素的排列方式也會(huì)改變，頁(yè)面布局也跟著改變:

實(shí)例

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 順序指定了彈性子元素在父容器中的位置。

語(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í)例

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


嘗試一下 ?

以下實(shí)例演示了 column 的使用:

實(shí)例

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

嘗試一下 ?

以下實(shí)例演示了 column-reverse 的使用:

實(shí)例

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

內(nèi)容對(duì)齊（justify-content）屬性應(yīng)用在彈性容器上，把彈性項(xiàng)沿著彈性容器的主軸線（main axis，也可理解為橫軸）對(duì)齊。

 內(nèi)容對(duì)齊可以理解為彈性盒子的Y軸坐標(biāo)不變，盒子只會(huì)有X軸的變化，所以實(shí)際上內(nèi)容對(duì)齊用于設(shè)置列對(duì)齊。像flex-start效果就有點(diǎn)像左對(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í)例

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

嘗試一下 ?

以下實(shí)例演示了 center 的使用:

實(shí)例

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

嘗試一下 ?

以下實(shí)例演示了 space-between 的使用:

實(shí)例

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

嘗試一下 ?

以下實(shí)例演示了 space-around 的使用:

實(shí)例

.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 （項(xiàng)目對(duì)齊）設(shè)置或檢索彈性盒子元素在側(cè)軸（縱軸）方向上的對(duì)齊方式。

 項(xiàng)目對(duì)齊可以理解為彈性盒子的X軸坐標(biāo)不變，盒子只會(huì)有Y軸的變化，所以實(shí)際上內(nèi)容對(duì)齊用于設(shè)置行對(duì)齊。

align-items屬性可以理解為縱向的justify-content 

像center效果就是垂直方向的居中。

語(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í)例

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

嘗試一下 ?

以下實(shí)例演示了 flex-start 的使用:

實(shí)例

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

嘗試一下 ?

以下實(shí)例演示了 flex-end 的使用:

實(shí)例

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

嘗試一下 ?

以下實(shí)例演示了 center 的使用:

實(shí)例

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

嘗試一下 ?

以下實(shí)例演示了 baseline 的使用:

實(shí)例

.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 屬性用于指定彈性盒子的子元素?fù)Q行方式。

語(yǔ)法

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

各個(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í)例

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

嘗試一下 ?

以下實(shí)例演示了 wrap 的使用:

實(shí)例

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

嘗試一下 ?

以下實(shí)例演示了 wrap-reverse 的使用:

實(shí)例

.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, 但它不是設(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í)例

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

嘗試一下 ?

彈性子元素屬性

排序

語(yǔ)法

order:

各個(gè)值解析:

  • <integer>：沒(méi)有設(shè)置order屬性的順序值默認(rèn)為0.

    負(fù)值在前，然后默認(rèn)為0，正值最后，順序值越小越在前面

order 屬性設(shè)置彈性容器內(nèi)彈性子元素的屬性:

實(shí)例

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

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

嘗試一下 ?

對(duì)齊

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

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

實(shí)例

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

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

嘗試一下 ?

完美的居中

以下實(shí)例將完美解決我們平時(shí)碰到的居中問(wèn)題。

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

實(shí)例

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

嘗試一下 ?

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í)例

.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 屬性用于指定彈性子元素如何分配空間。

語(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í)例

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

嘗試一下 ?
更多實(shí)例

使用彈性盒子創(chuàng)建響應(yīng)式頁(yè)面

CSS3 彈性盒子屬性

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

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


以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)