CSS3新增布局之: flex詳解

發(fā)布時(shí)間：2020-06-18 15:43:49 作者：我是豬姐呀丶

flex布局（flex是flexible box的縮寫(xiě)），也稱(chēng)為彈性盒模型，這篇文章主要介紹了CSS3新增布局之: flex的相關(guān)知識(shí)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

flex 基本概念

flex布局（flex是flexible box的縮寫(xiě)），也稱(chēng)為彈性盒模型。將屬性和屬性值（display:flex; ）寫(xiě)在哪個(gè)標(biāo)簽樣式中，誰(shuí)就是容器；它的所有子元素自動(dòng)成為容器成員，稱(chēng)為項(xiàng)目。

當(dāng)一個(gè)元素的display 取值為flex，所有項(xiàng)目(子元素)會(huì)在一行顯示；如果所有項(xiàng)目的尺寸之和大于容器，也不會(huì)超出父元素的寬、高度。不會(huì)換行(每個(gè)項(xiàng)目都會(huì)自動(dòng)縮小相應(yīng)的比例)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>布局之:flex</title>
    <link rel="stylesheet" href="./CSS/normalize.css">
    <style>
        section {
            width: 500px;
            height: 800px;
            border: 2px solid black;
            margin: 50px auto;
            display: flex;
        }
        div {
            width: 100px;
            height: 100px;
            border: 1px solid tomato;
        }
    </style>
</head>
<body>
    <section>
        <div>01</div>
        <div>02</div>
        <div>03</div>
        <div>04</div>
        <div>05</div>
        <div>06</div>
    </section>
</body>
</html>

頁(yè)面效果：每一個(gè)容器都等比例縮小了

css代碼分為兩種: 一類(lèi)是適用于容器的 (設(shè)置主軸的起始位置、換行、主軸的對(duì)齊方式、多跟軸線對(duì)齊方式)；一類(lèi)是適用于項(xiàng)目的(設(shè)置項(xiàng)目的位置)。

容器常用的屬性和屬性值

由于重復(fù)代碼較多，就不一一上傳代碼了,大家可以自己動(dòng)手，敲敲代碼，試試看。

一、設(shè)置主軸的起始方向 flex-direction：

默認(rèn)為X軸（行）：

<style>
        section {
            width: 500px;
            height: 500px;
            border: 2px solid black;
            margin: 50px auto;
            display: flex;
            /* flex-direction: row; */
            /* flex-direction: row-reverse; */
            /* flex-direction: column; */
            /* flex-direction: column-reverse; */
        }
        
        div {
            width: 100px;
            height: 100px;
            border: 1px solid tomato;
        }
    </style>

flex-direction:row; 默認(rèn)是X軸的起始方向?yàn)殚_(kāi)始位置 (從左到右依次擺放)；

flex-direction:row-reverse; 改變X軸的起始方向?yàn)榻Y(jié)束位置 (從右到左依次擺放)；

設(shè)置主軸的起始方向?yàn)閅軸（列）：

flex-direction:column; 默認(rèn)是Y軸的起始方向?yàn)殚_(kāi)始位置(從上到下依次擺放)

flex-direction:column-reverse; 改變Y軸的起始方向?yàn)榻Y(jié)束位置(從下到上依次擺放)

二、設(shè)置項(xiàng)目是否換行 flex-wrap：（默認(rèn)是不換行）

<style>
        section {
            width: 400px;
            height: 400px;
            border: 2px solid black;
            margin: 50px auto;
            display: flex;
            /* flex-wrap: wrap; */
            /* flex-wrap: wrap-reverse; */
        }
        
        div {
            width: 100px;
            height: 100px;
            border: 1px solid tomato;
        }
    </style>

flex-wrap: nowrap; 默認(rèn)值是不換行；（n個(gè)項(xiàng)目都會(huì)在一行顯示.如果項(xiàng)目尺寸之和大于容器主軸的尺寸,則項(xiàng)目會(huì)自動(dòng)縮小相應(yīng)比列.） (參考第一個(gè)代碼頁(yè)面結(jié)果展示)

flex-wrap: wrap; 設(shè)置換行；（超出主軸的寬，則進(jìn)行換行。換行后，兩行之間會(huì)出現(xiàn)間距，是因?yàn)榇怪狈较蛴惺Ｓ嗫臻g，會(huì)平均分配給第二行的上下）

flex-wrap: wrap-reverse; 倒序換行；（如果有兩行,第2行顯示在前面,第一行顯示在后面）

三、主軸方向的對(duì)齊方式 justify-content：

項(xiàng)目是一個(gè)時(shí)：

<style>
        section {
            width: 400px;
            height: 400px;
            border: 2px solid black;
            margin: 50px auto;
            display: flex;
            /* justify-content: flex-start; */
            /* justify-content: flex-end; */
            /* justify-content: center; */
        }
        
        div {
            width: 100px;
            height: 100px;
            border: 1px solid tomato;
        }
    </style>

justify-content:flex-start; 以主軸開(kāi)始方向?qū)R (默認(rèn))

justify-content:flex-end; 以主軸結(jié)束方向?qū)R

justify-content:center; 主軸方向居中

項(xiàng)目是多個(gè)時(shí):

<style>
        section {
            width: 500px;
            height: 500px;
            border: 2px solid black;
            margin: 50px auto;
            display: flex;
            /* justify-content: space-between; */
            /* justify-content: space-around; */
            /* justify-content: space-evenly; */
        }
        
        div {
            width: 100px;
            height: 100px;
            border: 1px solid tomato;
        }
    </style>

justify-content: space-between; 兩端對(duì)齊（第一個(gè)項(xiàng)目在容器的起始位置,最后一個(gè)項(xiàng)目在容器的結(jié)束位置，中間距離相等）

justify-content: space-around; 分散對(duì)齊

justify-content: space-evenly; 平分剩余空間，每個(gè)項(xiàng)目之間的距離相同

四、主軸改變?yōu)榻徊孑S方向的對(duì)齊方式

一根軸線：主軸需改變?yōu)閅軸：flex-direction: column;

align-items: baseline; 以項(xiàng)目的第一行文字的基線對(duì)齊

align-items: stretch; (項(xiàng)目沒(méi)有給高的情況下,stretch就是默認(rèn)值，如果項(xiàng)目沒(méi)有設(shè)置高度,就是容器的高）

<style>
        section {
            width: 500px;
            height: 500px;
            border: 2px solid black;
            margin: 50px auto;
            display: flex;
            /* 主軸需改變?yōu)閅軸 項(xiàng)目按列擺放 */
            flex-direction: column;
            /* align-items: flex-start;  默認(rèn)擺放方式 */
            /* align-items: center; */
            /* align-items: flex-end; */
        }
        
        div {
            width: 100px;
            height: 100px;
            border: 1px solid tomato;
        }
    </style>

align-items: flex-start; 交叉軸從開(kāi)始位置對(duì)齊

align-items: center; 交叉軸居中對(duì)齊

align-items: flex-end; 交叉軸從結(jié)束位置對(duì)齊

多根軸線： (所有項(xiàng)目的尺寸之和，必須大于容器的尺寸,使項(xiàng)目換行顯示)

<style>
        section {
            width: 500px;
            height: 500px;
            border: 2px solid black;
            margin: 50px auto;
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            /* align-content: center; */
            /* align-content: flex-end; */
            /* align-content: space-between; */
            /* align-content: space-around; */
        }
        
        div {
            width: 100px;
            height: 100px;
            border: 1px solid tomato;
        }
    </style>

align-content: flex-start; 交叉軸從開(kāi)始位置對(duì)齊

align-content: center; 交叉軸居中對(duì)齊

align-content: flex-end; 交叉軸從結(jié)束位置對(duì)齊

align-content: space-between; 交叉軸兩端對(duì)齊

align-content: space-around; 交叉軸分散對(duì)齊

align-content: space-evenly; 交叉軸平均分配

項(xiàng)目的屬性和屬性值：

一、order 控制項(xiàng)目位置

order：1；

取值 : 正、負(fù)數(shù) (默認(rèn)值是 0)

值越小越靠前值越大越靠后。

（適用場(chǎng)景: 1.搜索引擎優(yōu)化,提升SEO 把重要的信息在html代碼中靠前擺放,但不影響布局 2.調(diào)整項(xiàng)目位置）

<style>
        section {
            width: 500px;
            height: 500px;
            border: 2px solid black;
            margin: 50px auto;
            display: flex;
        }
        
        div {
            width: 100px;
            height: 100px;
            border: 1px solid tomato;
        }
        
        div:nth-child(4) {
            order: -1;
        }
    </style>

設(shè)置一個(gè)或多個(gè)[項(xiàng)目]在交叉軸的對(duì)齊方式:

<style>
        section {
            width: 800px;
            height: 400px;
            border: 2px solid black;
            margin: 50px auto;
            display: flex;
        }
        
        div {
            width: 100px;
            height: 100px;
            border: 1px solid tomato;
        }
        
        div:nth-child(2) {
            align-self: center;
        }
        
        div:nth-child(3) {
            align-self: flex-end;
        }
    </style>

align-self: flex-start; 設(shè)置項(xiàng)目在交叉軸開(kāi)始位置擺放（默認(rèn)位置）

align-self: center; 設(shè)置項(xiàng)目在交叉軸居中擺放

align-self: flex-end; 設(shè)置項(xiàng)目在交叉軸結(jié)束位置擺放

設(shè)置某一個(gè)或多個(gè)元素放大比例

條件:所有項(xiàng)目的尺寸之和要小于容器的尺寸
（沒(méi)有剩余空間，則設(shè)置此屬性無(wú)效。）

一個(gè)元素有 flex-grow 屬性

<style>
        section {
            width: 800px;
            height: 400px;
            border: 2px solid black;
            margin: 50px auto;
            display: flex;
        }
        
        div {
            width: 100px;
            height: 100px;
            border: 1px solid tomato;
        }
        
        div:nth-child(2) {
            flex-grow: 1;
        }
    </style>

多個(gè)項(xiàng)目有flex-grow 屬性

<style>
        section {
            width: 800px;
            height: 200px;
            border: 2px solid black;
            margin: 50px auto;
            display: flex;
            box-sizing: border-box;
        }
        
        div {
            width: 100px;
            height: 100px;
            border: 1px solid tomato;
            box-sizing: border-box;
        }
        
        div:nth-child(2) {
            flex-grow: 1;
        }
        
        div:nth-child(4) {
            flex-grow: 2;
        }
    </style>

效果展示