編程教程

　　 編程問(wèn)答　 ACM與藍(lán)橋杯競(jìng)賽入門(mén)　 C語(yǔ)言教程　 C++教程　 數(shù)據(jù)結(jié)構(gòu)教程　 Python教程　 JAVA教程　 編譯器教程　 C語(yǔ)言函數(shù)庫(kù)　 更多教程

CSS彈性布局/彈性盒子（flex布局）

138114 閱讀 0 評(píng)論 1 點(diǎn)贊

flex是flexible box的縮寫(xiě)，譯為“彈性布局”，用來(lái)為盒模型提供最大的靈活性，任何一個(gè)容器都可以指定為flex布局，只需要設(shè)置“display:flex"即可；行內(nèi)元素可以通過(guò)設(shè)置”display:inline-flex“實(shí)現(xiàn)；需要注意的是，如果設(shè)置了flex布局，則子元素的float、clear和vertical-align屬性將失效。

1. 基本概念

flex布局是一種布局模型，經(jīng)常被稱(chēng)之為flexbox，使用flex布局之后，他會(huì)給子元素提供強(qiáng)大空間分配和對(duì)齊能力。

在沒(méi)有使用flex布局之前，常用布局有：流式布局，浮動(dòng)布局，定位布局等等。缺陷是子元素需要自己控制自己在父元素中的位置，還要注意父元素高度坍塌。

flex的優(yōu)點(diǎn)就是避免不靈活的布局形式，創(chuàng)建更多種布局模式供你選擇，解決了子元素的對(duì)齊和分布與響應(yīng)式等問(wèn)題。缺點(diǎn)是只能依靠自身的布局模式，稍有變化則無(wú)法改變。

使用了flex布局的元素，稱(chēng)為flex容器（flex container），簡(jiǎn)稱(chēng)為”容器“。它所有的子元素自動(dòng)生成容器成員，稱(chēng)為flex項(xiàng)目（flex item），簡(jiǎn)稱(chēng)”項(xiàng)目”；

項(xiàng)目

容器默認(rèn)存在兩根主軸：水平的主軸（main axis）和垂直的交叉軸（cross axis），主軸的開(kāi)始位置（即邊框的交叉點(diǎn)）叫做main start，結(jié)束位置叫做main end；交叉軸的開(kāi)始位置叫做cross start，結(jié)束位置叫做cross end。項(xiàng)目默認(rèn)沿主軸排列，單個(gè)項(xiàng)目占據(jù)的主軸空間叫做main size，占據(jù)的交叉軸空間叫做cross size。

CSS 中提供了以下屬性來(lái)實(shí)現(xiàn) Flex 布局：

屬性	描述
display	指定 HTML 元素的盒子類(lèi)型
flex-direction	指定彈性盒子中子元素的排列方式
flex-wrap	設(shè)置當(dāng)彈性盒子的子元素超出父容器時(shí)是否換行
flex-flow	flex-direction 和 flex-wrap 兩個(gè)屬性的簡(jiǎn)寫(xiě)
justify-content	設(shè)置彈性盒子中元素在主軸（橫軸）方向上的對(duì)齊方式
align-items	設(shè)置彈性盒子中元素在側(cè)軸（縱軸）方向上的對(duì)齊方式
align-content	修改 flex-wrap 屬性的行為，類(lèi)似 align-items，但不是設(shè)置子元素對(duì)齊，而是設(shè)置行對(duì)齊
order	設(shè)置彈性盒子中子元素的排列順序
align-self	在彈性盒子的子元素上使用，用來(lái)覆蓋容器的 align-items 屬性
flex	設(shè)置彈性盒子中子元素如何分配空間
flex-grow	設(shè)置彈性盒子的擴(kuò)展比率
flex-shrink	設(shè)置彈性盒子的收縮比率
flex-basis	設(shè)置彈性盒子伸縮基準(zhǔn)值

按照作用范圍的不同，這些屬性可以分為兩類(lèi)，分別為容器屬性（flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content）和項(xiàng)目屬性（order、align-self、flex、flex-grow、flex-shrink、flex-basis）。下面就來(lái)介紹一下這些屬性的使用。

2. 容器的屬性

（1）flex-direction：指定彈性盒子內(nèi)子元素的排列方向；

屬性的可選值如下：

值	描述
row	默認(rèn)值，主軸沿水平方向從左到右
row-reverse	主軸沿水平方向從右到左
column	主軸沿垂直方向從上到下
column-reverse	主軸沿垂直方向從下到上
initial	將此屬性設(shè)置為屬性的默認(rèn)值
inherit	從父元素繼承此屬性的值

flex-direction屬性決定主軸的方向（即項(xiàng)目的排列方向）；

.box{
    flex-direction:row|row-reverse|column|column-reverse;
}

該屬性有4個(gè)值

● row（默認(rèn)值）：主軸為水平方向，起點(diǎn)在左端；

● row-reverse：主軸為水平方向，起點(diǎn)在右端；

● column：主軸為垂直方向，起點(diǎn)在上沿；

● column-reverse：主軸為垂直方向，起點(diǎn)在下沿；

上述效果如下圖所示：

flex-direction

（2）flex-wrap：指定彈性盒子內(nèi)子元素的換行方式；

默認(rèn)情況下，項(xiàng)目都排在一條線（又稱(chēng)”軸線“）上，flex-wrap屬性定義，如果一條軸線排不下，如何換行，有以下三個(gè)取值：

.box{
    flex-wrap:nowrap|wrap|wrap-reverse
}

● nowrap（默認(rèn)）：不換行，排列方式效果如圖：

nowrap（默認(rèn)）

● wrap：換行，第一行在上方，排列方式效果如圖：

wrap

● wrap-reverse：換行，第一行在下方，排列方式效果如圖：

wrap-reverse

（3）flex-flow：該屬性作用于彈性盒容器，用于控制容器內(nèi)元素的排列方向和換行方式，該屬性是一個(gè)復(fù)合屬性，由flex-direction和flex-wrap組成；

.box{
    flex-flow:<flex-direction><flex-wrap>;
}

（4）justify-content：該屬性作用于彈性盒容器內(nèi)的子元素，用于控制該子元素自身在排列方向上的分布方式；

justify-content屬性定義了項(xiàng)目在主軸上的對(duì)齊方式

.box{
    justify-content:flex-start|flex-end|center|space-between|space-around;
}

該屬性有5個(gè)值：

● flex-start（默認(rèn)值）：左對(duì)齊；

● flex-end：右對(duì)齊；

● center：居中；

● space-between：兩端對(duì)齊，項(xiàng)目之間的間隔都相等；

● space-around：每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等，所以項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍；

上述效果如下圖所示：

justify-content

（5）align-items：該屬性作用于彈性盒容器，用于控制彈性盒內(nèi)所有子元素在排列方向的垂直方向上的對(duì)齊方式；

align-item屬性定義項(xiàng)目在交叉軸上如何對(duì)齊

.box{
    align-items:flex-start|flex-end|center|baseline|stretch;
}

該屬性有5個(gè)值，具體的對(duì)齊方式與交叉軸的方向有關(guān)，假設(shè)交叉軸從上到下：

● flex-start：交叉軸的起點(diǎn)對(duì)齊；

● flex-end：交叉軸的中點(diǎn)對(duì)齊；

● center：交叉軸的中點(diǎn)對(duì)齊；

● baseline：項(xiàng)目的第一行文字的基線對(duì)齊；

● stretch（默認(rèn)值）：如果項(xiàng)目未設(shè)置高度或設(shè)置為auto，將占滿(mǎn)整個(gè)容器的高度；

上述效果如下圖所示：

align-items

3. 項(xiàng)目的屬性

（1）order屬性

order 屬性用來(lái)設(shè)置項(xiàng)目在容器中出現(xiàn)的順序，您可以通過(guò)具體的數(shù)值來(lái)定義項(xiàng)目在容器中的位置，屬性的語(yǔ)法格式如下：

order: number;

其中 number 就是項(xiàng)目在容器中的位置，默認(rèn)值為 0。

舉例：

<!DOCTYPE html>
<html>
<head>
    <style>
        .flex {
            display: flex;
            flex-flow: row wrap;
            margin-top: 10px;
        }
        .flex div {
            width: 60px;
            height: 60px;
            margin-bottom: 5px;
            border: 1px solid black;
        }
        .flex div:nth-child(1) {
            order: 3;
        }
        .flex div:nth-child(2) {
            order: 1;
        }
        .flex div:nth-child(3) {
            order: 2;
        }
        .flex div:nth-child(4) {
            order: 5;
        }
        .flex div:nth-child(5) {
            order: 4;
    </style>
</head>
<body>
    <div>
        <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
    </div>
</body>
</html>

運(yùn)行結(jié)果：

order屬性

（2）align-self屬性

align-self 屬性允許您為某個(gè)項(xiàng)目設(shè)置不同于其它項(xiàng)目的對(duì)齊方式，該屬性可以覆蓋 align-items 屬性的值。align-self 屬性的可選值如下：

值	描述
auto	默認(rèn)值，表示元素將繼承其父容器的 align-items 屬性值，如果沒(méi)有父容器，則為“stretch”
stretch	項(xiàng)目將被拉伸以適合容器
center	項(xiàng)目位于容器的中央
flex-start	項(xiàng)目位于容器的頂部
flex-end	項(xiàng)目位于容器的底部
baseline	項(xiàng)目與容器的基線對(duì)齊
initial	將此屬性設(shè)置為屬性的默認(rèn)值
inherit	從父元素繼承屬性的值

舉例：

<!DOCTYPE html>
<html>
<head>
    <style>
        .flex {
            display: flex;
            flex-flow: row wrap;
            align-items: flex-end;
            border: 1px solid #CCC;
            height: 150px;
        }
        .flex div {
            width: 60px;
            height: 60px;
            border: 1px solid black;
        }
        .flex div:nth-child(3) {
            align-self: flex-start;
        }
    </style>
</head>
<body>
    <div>
        <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
    </div>
</body>
</html>

運(yùn)行結(jié)果：

align-self屬性

（3）flex屬性

flex 屬性是 flex-grow、flex-shrink 和 flex-basis 三個(gè)屬性的簡(jiǎn)寫(xiě)，語(yǔ)法格式如下：

flex: flex-grow flex-shrink flex-basis;

參數(shù)說(shuō)明如下：

● flex-grow：（必填參數(shù)）一個(gè)數(shù)字，用來(lái)設(shè)置項(xiàng)目相對(duì)于其他項(xiàng)目的增長(zhǎng)量，默認(rèn)值為 0；

● flex-shrink：（選填參數(shù)）一個(gè)數(shù)字，用來(lái)設(shè)置項(xiàng)目相對(duì)于其他項(xiàng)目的收縮量，默認(rèn)值為 1；

● flex-basis：（選填參數(shù)）項(xiàng)目的長(zhǎng)度，合法值為 auto（默認(rèn)值，表示自動(dòng)）、inherit（表示從父元素繼承該屬性的值）或者以具體的值加 "%"、"px"、"em" 等單位的形式。

另外，flex 屬性還有兩個(gè)快捷值，分別為 auto（1 1 auto）和 none（0 0 auto）。

示例代碼如下：

<!DOCTYPE html>
<html>
<head>
    <style>
        .flex {
            display: flex;
            flex-flow: row wrap;
            align-items: flex-end;
            border: 1px solid #CCC;
        }
        .flex div {
            width: 60px;
            height: 60px;
            border: 1px solid black;
        }
        .flex div:nth-child(2) {
            flex:0;
        }
        .flex div:nth-child(4) {
            flex:1 1 auto;
        }
    </style>
</head>
<body>
    <div>
        <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
    </div>
</body>
</html>

運(yùn)行結(jié)果：

flex屬性