亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 8
粉絲 1
評(píng)論 0
訪問(wèn)量 14154
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
flex容器中的主軸方向與項(xiàng)目換行縮寫(xiě)、主軸，交叉軸和多行容器交叉軸項(xiàng)目對(duì)齊以及以及flex屬性的縮寫(xiě)和案例
雷斯提亞
原創(chuàng)
3317人瀏覽過(guò)

flex

1. flex容器與項(xiàng)目

1.1.  display屬性（共2種）

序號(hào)屬性值描述備注
1flex;創(chuàng)建 flex 塊級(jí)容器內(nèi)部子元素自動(dòng)成為 flex 項(xiàng)目
2inline-flex;創(chuàng)建 flex 行內(nèi)容器內(nèi)部子元素自動(dòng)成為 flex 項(xiàng)目

1.2.  flex 容器與項(xiàng)目特征

序號(hào)容器/項(xiàng)目默認(rèn)行為
1容器主軸水平方向
2項(xiàng)目排列沿主軸起始線排列(當(dāng)前起始線居左)
3項(xiàng)目類型自動(dòng)轉(zhuǎn)換”行內(nèi)塊級(jí)”元素,不管之前是什么類型
4容器主軸空間不足時(shí)項(xiàng)目自動(dòng)收縮尺寸以適應(yīng)空間變化,不會(huì)換行顯示
5容器主軸存在未分配空間時(shí)項(xiàng)目保持自身大小不會(huì)放大并充滿空間
例：
<head>    <style>        .dome{            width: 300px;            height: 200px;            display: flex;        }    </style></head><body>    <div class="dome">        <div class="item">1</div>        <div class="item">2</div>        <div class="item">3</div>    </div></body>

2. flex 容器主軸方向：

flex-direction屬性：

序號(hào)屬性值描述
1row默認(rèn)值主軸水平: 起始線居中,項(xiàng)目從左到右顯示
2row-reverse主軸水平:起始線居右, 項(xiàng)目從右向左顯示
3column主軸垂直: 起始線居上,項(xiàng)目從上向下顯示
4column-reverse主軸垂直: 起始線居下,項(xiàng)目從下向上顯示
例：
    <style>        .dome{            width: 300px;            height: 200px;            display: flex;            flex-direction: row-reverse;        }        .item {        width: 100px;        height: 50px;        background-color:red;        font-size: 3rem;      }    </style>

    <style>        .dome{            width: 300px;            height: 200px;            display: flex;            flex-direction: column-reverse;        }        .item {        width: 100px;        height: 50px;        background-color:red;        font-size: 3rem;      }    </style>

3. flex 容器主軸項(xiàng)目換行

3.1 flex-warp屬性：

序號(hào)屬性值描述
1nowrap默認(rèn)值項(xiàng)目不換行: 單行容器
2wrap項(xiàng)目換行: 多行容器,第一行在上方
3wrap-reverse項(xiàng)目換行: 多行容器,第一行在下方
例：

  • 項(xiàng)目不換行：


    1.  <style>

    2.      .dome{

    3.          width: 300px;

    4.          height: 200px;

    5.          display: flex;

    6.          flex-wrap: nowrap;

    7.      }

    8.      .item {

    9.      width: 150px;

    10.      height: 50px;

    11.      background-color:red;

    12.      font-size: 3rem;

    13.    }

    14.  </style>

  • 項(xiàng)目換行（上）


    1.  <style>

    2.      .dome{

    3.          width: 300px;

    4.          height: 200px;

    5.          display: flex;

    6.          flex-wrap: wrap;

    7.      }

    8.      .item {

    9.      width: 150px;

    10.      height: 50px;

    11.      background-color:red;

    12.      font-size: 3rem;

    13.    }

    14.  </style>

  • 項(xiàng)目換行（下）


    1.  <style>

    2.      .dome{

    3.          width: 300px;

    4.          height: 200px;

    5.          display: flex;

    6.          flex-wrap: wrap-reverse;

    7.      }

    8.      .item {

    9.      width: 150px;

    10.      height: 50px;

    11.      background-color:red;

    12.      font-size: 3rem;

    13.    }

    14.  </style>

3.2 簡(jiǎn)寫(xiě)：

  • （1）flex-flow是屬性flex-direction和flex-wrap的簡(jiǎn)寫(xiě)

  • （2）語(yǔ)法：flex-flow: flex-direction flex-warp

  • （3）row nowarp為默認(rèn)值

例：
    <style>        .dome{            width: 300px;            height: 200px;            display: flex;            flex-flow: row-reverse wrap;        }        .item {        width: 150px;        height: 50px;        background-color:red;        font-size: 3rem;      }    </style>

4. flex 容器主軸與項(xiàng)目對(duì)齊

justify-content屬性

序號(hào)屬性值描述
1flex-start默認(rèn)所有項(xiàng)目與主軸起始線對(duì)齊
2flex-end所有項(xiàng)目與主軸終止線對(duì)齊
3center所有項(xiàng)目與主軸中間線對(duì)齊: 居中對(duì)齊
4space-between兩端對(duì)齊: 剩余空間在頭尾項(xiàng)目之外的項(xiàng)目間平均分配
5space-around分散對(duì)齊: 剩余空間在每個(gè)項(xiàng)目二側(cè)平均分配
6space-evenly平均對(duì)齊: 剩余空間在每個(gè)項(xiàng)目之間平均分配
注：當(dāng)容器中主軸方向上存在剩余空間時(shí), 該屬性才有意義
例：

  • 終止線對(duì)齊：


    1.  <style>

    2.      .dome{

    3.          width: 400px;

    4.          height: 200px;

    5.          display: flex;

    6.          justify-content: flex-end;

    7.      }

    8.      .item {

    9.      width: 100px;

    10.      height: 50px;

    11.      background-color:red;

    12.      font-size: 3rem;

    13.    }

    14. </style>

  • 居中對(duì)齊：


    1.   .dome{

    2.          width: 400px;

    3.          height: 200px;

    4.          display: flex;

    5.          justify-content: center;

    7.      }

  • 兩端對(duì)齊：


    1. .dome{

    2.          width: 400px;

    3.          height: 200px;

    4.          display: flex;

    5.          justify-content: space-between;

    6.      }

  • 分散對(duì)齊：


    1.    .dome{

    2.          width: 400px;

    3.          height: 200px;

    4.          display: flex;

    5.          justify-content: space-around;

    6.      }

  • 平均對(duì)齊：


    1.  .dome{

    2.          width: 400px;

    3.          height: 200px;

    4.          display: flex;

    5.          justify-content: space-evenly;

    6.      }

5. flex容器交叉軸項(xiàng)目對(duì)齊

align-items屬性：

序號(hào)屬性值描述
1flex-start默認(rèn)與交叉軸起始線對(duì)齊
2flex-end與交叉軸終止線對(duì)齊
3center與交叉軸中間線對(duì)齊: 居中對(duì)齊
例：
     .dome{            width: 400px;            height: 200px;            display: flex;            align-items: flex-end;        }

  • 居中對(duì)齊：


    1.   .dome{

    2.          width: 400px;

    3.          height: 200px;

    4.          display: flex;

    5.          align-items: center;

    6.      }

6. flex 多行容器交叉軸項(xiàng)目對(duì)齊

6.1. align-content屬性：

序號(hào)屬性值描述
1stretch默認(rèn)項(xiàng)目拉伸占據(jù)整個(gè)交叉軸
1flex-start所有項(xiàng)目與交叉軸起始線(頂部)對(duì)齊
2flex-end所有項(xiàng)目與交叉軸終止線對(duì)齊
3center所有項(xiàng)目與交叉軸中間線對(duì)齊: 居中對(duì)齊
4space-between兩端對(duì)齊: 剩余空間在頭尾項(xiàng)目之外的項(xiàng)目間平均分配
5space-around分散對(duì)齊: 剩余空間在每個(gè)項(xiàng)目二側(cè)平均分配
6space-evenly平均對(duì)齊: 剩余空間在每個(gè)項(xiàng)目之間平均分配
注：

  • （1）該屬性僅適用于多行容器

  • （2）多行容器中, 交叉軸會(huì)有多個(gè)項(xiàng)目, 剩余空間在項(xiàng)目之間分配才有意義

例：
    <style>        .dome{            width: 200px;            height: 200px;            display: flex;            flex-wrap: wrap;            align-content: flex-end;        }

    .dome{            width: 200px;            height: 200px;            display: flex;            flex-wrap: wrap;            align-content: space-around;        }

6.2. align-self屬性：

序號(hào)屬性值描述
1auto默認(rèn)值繼承 align-items 屬性值
2flex-start與交叉軸起始線對(duì)齊
3flex-end與交叉軸終止線對(duì)齊
4center與交叉軸中間線對(duì)齊: 居中對(duì)齊
5stretch在交叉軸方向上拉伸
6baseline與基線對(duì)齊(與內(nèi)容相關(guān)用得極少)
注：

  • 該屬性可覆蓋容器的align-items, 用以自定義某個(gè)項(xiàng)目的對(duì)齊方式

      .item:first-of-type{          height: initial;          align-self: stretch;      }      .item:nth-of-type(2){          align-self: flex-end;      }      .item:last-of-type{          align-self: center;      }

7. 項(xiàng)目放大因子

flex-grow屬性：

  • （1）在容器主軸上存在剩余空間時(shí), flex-grow才有意義

  • （2）該屬性的值,稱為放大因子

序號(hào)屬性值描述
10默認(rèn)值不放大,保持初始值
2initial設(shè)置默認(rèn)值,與0等效
3n放大因子: 正數(shù)
例：
   <style>        .dome{            width: 300px;            height: 200px;            display: flex;            /* flex-wrap: wrap; */        }        .item {        width: 50px;        height: 50px;        background-color:red;        font-size: 3rem;      }      .item:first-of-type{          flex-grow: 1;      }      .item:nth-of-type(2){       background-color: lawngreen;       flex-grow: 2;      }      .item:last-of-type{        background-color: lightseagreen;        flex-grow: 3;      }    </style>

計(jì)算公式：

  • 300-（50）*3=150

  • 150/（1+2+3）=25

  • 則：第一個(gè)元素為：50=25=75px

  • 第二個(gè)元素為：50+25*2=100px

  • 第三個(gè)元素為：50+25*3=125px

8. flex 項(xiàng)目收縮因子

flex-shrink屬性

序號(hào)屬性值描述
11默認(rèn)值允許項(xiàng)目收縮
2initial設(shè)置初始默認(rèn)值,與 1 等效
30禁止收縮,保持原始尺寸
4n收縮因子: 正數(shù)
注：

  • 當(dāng)容器主軸 “空間不足” 且 “禁止換行” 時(shí), flex-shrink才有意義

例：
    <style>        .dome{            width: 300px;            height: 200px;            display: flex;            flex-flow: row nowrap;        }        .item {        width: 150px;        height: 50px;        background-color:red;        font-size: 3rem;      }      .item:first-of-type{          flex-shrink: 1;      }      .item:nth-of-type(2){        background-color: lawngreen;        flex-shrink: 2;      }      .item:last-of-type{        background-color: lightseagreen;        flex-shrink: 3;      }    </style>

計(jì)算公式：

  • 三個(gè)元素共：150*3=450px

  • 算出應(yīng)該收縮的大小：450-300=150px

  • 算出每一個(gè)收縮倍數(shù)所要收縮的大?。?50/（1+2+3）=25px

  • 則：第一個(gè)元素的寬度應(yīng)該是：150-25*1=125px

  • 第二個(gè)元素的寬度應(yīng)該是：150-25*2=100px

  • 第三個(gè)元素的寬度應(yīng)該是：150-25*3=75px

9. flex 項(xiàng)目計(jì)算尺寸

flex-basis屬性

序號(hào)屬性值描述
1auto默認(rèn)值: 項(xiàng)目原來(lái)的大小
2px像素
3%百分比
注：

  • （1）在分配多余空間之前,項(xiàng)目占據(jù)的主軸空間

  • （2）瀏覽器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余空間

  • （3）該屬性會(huì)覆蓋項(xiàng)目原始大小(width/height)

  • （4）該屬性會(huì)被項(xiàng)目的min-width/min-height值覆蓋

  • 即：優(yōu)先級(jí): 項(xiàng)目大小 < flex-basis < min-width/max-height

例：
    <style>        .dome{            width: 300px;            height: 200px;            display: flex;            flex-flow: row nowrap;        }        .item {        width: 50px;        height: 50px;        background-color:red;        font-size: 3rem;      }      .item:first-of-type{          flex-basis: 100px;      }      .item:nth-of-type(2){        background-color: lawngreen;        flex-basis: 30%;      }      .item:last-of-type{        background-color: lightseagreen;      }    </style>

10. flex 項(xiàng)目縮放的簡(jiǎn)寫(xiě)

  • 語(yǔ)法：flex: flex-grow flex-shrink flex-basis

三值語(yǔ)法：

序號(hào)屬性值描述
1第一個(gè)值: 整數(shù) (0/1)flex-grow
2第二個(gè)值: 整數(shù)(0/1)flex-shrink
3第三個(gè)值: 有效寬度flex-basis

雙值語(yǔ)法：

序號(hào)屬性值描述
1第一個(gè)值: 整數(shù)flex-grow
3第二個(gè)值: 有效寬度flex-basis

單值語(yǔ)法：

序號(hào)屬性值描述
1整數(shù)flex-grow
2有效寬度flex-basis
3關(guān)鍵字initial / auto / none
序號(hào)案例描述
1flex: 1flex: 1 1 auto
2flex: 180pxflex: 1 1 180px
3initialflex: 0 1 auto
4autoflex: 1 1 auto
5noneflex: 0 0 auto
例：

三值語(yǔ)法：

      .item:first-of-type{      flex: 0 1 100px      }

二值語(yǔ)法：

      .item:first-of-type{      flex: 0 150px      }

總結(jié)：

  • （1）display:flex創(chuàng)建flex 塊級(jí)容器而display:inline-flex創(chuàng)建flex 行內(nèi)容器

  • （2）flex-flow是屬性flex-direction和flex-wrap的簡(jiǎn)寫(xiě)。語(yǔ)法為： flex-flow: flex-direction flex-wrap

  • （3）justify-content屬性僅當(dāng)容器中主軸方向上存在剩余空間時(shí), 該屬性才有意義

  • （4）align-items屬性僅適用于單行容器，且當(dāng)容器中交叉軸方向上存在剩余空間時(shí), 該屬性才有意義

  • （5）align-content屬性僅適用于多行容器，且剩余空間在項(xiàng)目之間分配才有意義

  • （6）align-self屬性可以覆蓋容器的align-items，用于自定義某個(gè)元素的對(duì)齊方式

  • （7）flex屬性可以對(duì)擴(kuò)大，收縮和項(xiàng)目計(jì)算尺寸進(jìn)行簡(jiǎn)化。語(yǔ)法為：flex: flex-grow flex-shrink flex-basis

  • （8）當(dāng)flex屬性只有兩個(gè)屬性值時(shí)，語(yǔ)法為：flex: flex-grow flex-basis

  • （9）當(dāng)flex屬性只有一個(gè)屬性值時(shí)，若是0/1，則為flex-grow;若為有效寬度是，則為flex-basis

批改老師：天蓬老師天蓬老師

批改狀態(tài)：合格

老師批語(yǔ)：非常棒, 作業(yè)要求全部都有, 很認(rèn)真, 也一定能學(xué)會(huì)
本博文版權(quán)歸博主所有，轉(zhuǎn)載請(qǐng)注明地址！如有侵權(quán)、違法，請(qǐng)聯(lián)系admin@php.cn舉報(bào)處理！
全部評(píng)論 文明上網(wǎng)理性發(fā)言，請(qǐng)遵守新聞評(píng)論服務(wù)協(xié)議
0條評(píng)論
關(guān)于我們 免責(zé)申明 意見(jiàn)反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長(zhǎng)！
關(guān)注服務(wù)號(hào) 技術(shù)交流群
PHP中文網(wǎng)訂閱號(hào)
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時(shí)隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號(hào)
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費(fèi)學(xué)