久久精品国产亚洲高清|精品日韩中文乱码在线|亚洲va中文字幕无码久|伊人久久综合狼伊人久久|亚洲不卡av不卡一区二区|精品久久久久久久蜜臀AV|国产精品19久久久久久不卡|国产男女猛烈视频在线观看麻豆

    1. <style id="76ofp"></style>

      <style id="76ofp"></style>
      <rt id="76ofp"></rt>
      <form id="76ofp"><optgroup id="76ofp"></optgroup></form>
      1. 千鋒教育-做有情懷、有良心、有品質(zhì)的職業(yè)教育機(jī)構(gòu)

        手機(jī)站
        千鋒教育

        千鋒學(xué)習(xí)站 | 隨時(shí)隨地免費(fèi)學(xué)

        千鋒教育

        掃一掃進(jìn)入千鋒手機(jī)站

        領(lǐng)取全套視頻
        千鋒教育

        關(guān)注千鋒學(xué)習(xí)站小程序
        隨時(shí)隨地免費(fèi)學(xué)習(xí)課程

        當(dāng)前位置:首頁(yè)  >  技術(shù)干貨  > 如何講清楚Flex彈性盒模型(中)?

        如何講清楚Flex彈性盒模型(中)?

        來(lái)源:千鋒教育
        發(fā)布人:qyf
        時(shí)間: 2022-10-10 15:42:45 1665387765

          上一篇我們講解了, flex容器的屬性, 如何定義主軸方向, 以及主軸\側(cè)軸對(duì)齊方式

          這篇講解子元素的一些屬性.

          如何對(duì)子項(xiàng)目進(jìn)行排序?

          彈性盒模型第一次可以讓我們方便的對(duì)元素進(jìn)行排序

          使用 order屬性, 它的默認(rèn)值是0

        圖片14

          元素按照order順序排列

          如何定義子項(xiàng)目大小?

          flex布局提供另外一個(gè)屬性 flex-basis

          它用來(lái)設(shè)定元素在主軸方向的大小

          注意主軸可以是row方向, 也可以column方向

        QQ截圖20221010153810

          另外, 某個(gè)子元素, 可以單獨(dú)設(shè)置跟其它子元素不一致的(側(cè)軸)對(duì)齊方式.

        QQ截圖20221010153822

          最后, 要隆重的介紹flex-grow這個(gè)屬性了

        圖片15

          它叫做『剩余空間瓜分比例』

          從圖上可以看出, AB沒有撐滿flex容器, 如果希望AB調(diào)整大小撐滿容器的話

          我們需要加上flex-grow這個(gè)屬性

          .container {

          display: flex;

          width: 500px;

          ....

          }

          div:nth-child(1) {

          width: 100px;

          background-color: pink;

          flex-grow: 1;

          }

          div:nth-child(2) {

          width: 100px;

          background-color: lightseagreen;

          flex-grow: 1;

          }

          那么AB元素會(huì)按照1:1的比例把父元素剩余的空間瓜分掉, 效果如圖

        圖片16

          當(dāng)然, 如果你希望B保持不變, 只有A變大的話, 你可以這樣寫

          div:nth-child(1) {

          background-color: pink;

          flex-grow: 1;

          }

          div:nth-child(2) {

          background-color: lightseagreen;

          flex-grow: 0; /*默認(rèn)值就是0, 其實(shí)不用寫*/

          }

        圖片17

          我們也可以調(diào)整比例

          div:nth-child(1) {

          width:100px;

          background-color: pink;

          flex-grow: 2;

          }

          div:nth-child(2) {

          width:100px;

          background-color: lightseagreen;

          flex-grow: 1;

          }

        圖片18

          AB按照2:1的比例瓜分了剩余空間

          既然可以放大, 元素也能縮小

          接下來(lái)介紹flex-shrink屬性, 它叫做多余空間削減比例

          當(dāng)元素大小超出了flex父容器, 子元素可以按比例縮減.

          但是這里的算法比剛才的flex-grow復(fù)雜了一些

          我們先看一種簡(jiǎn)單的情況

          .container{

          display: flex;

          flex-direction: row;

          justify-content: flex-start;

          box-shadow: 0 0 0 1px black;

          height: 100px; width: 400px; /*父元素寬度為400*/

          }

          div:nth-child(1) {

          width: 300px; /*子元素A寬度為300*/

          background-color: pink;

          flex-shrink: 1; /*多余空間削減比例為1, 默認(rèn)值為1, 可以不寫*/

          }

          div:nth-child(2) {

          width: 200px; /*子元素B寬度為200*/

          background-color: lightseagreen;

          flex-shrink: 1; /*多余空間削減比例為1, 默認(rèn)值為1, 可以不寫*/

          }

          削減比例我們?cè)O(shè)置了1:1 , 那么實(shí)際結(jié)果呢?

        圖片19

          從圖中的實(shí)際效果來(lái)看,

          A元素削減了60個(gè)像素

          B元素削減了40個(gè)像素

          這并不是1:1啊, 這是3:2啊

          這個(gè)3:2又是怎么來(lái)的呢?

          其實(shí), 它就是AB元素的原始比例大小

          所以, 在削減比例上, 元素還會(huì)受到原始大小比例的影響

          總結(jié)一個(gè)公式如下:

          子元素的削減比例===原始大小比例 X flex-shrink比例

          那么, 根據(jù)我們所得的公式, 如果我們想讓上面的例子當(dāng)中

          AB元素都削減一樣的大小該如何做呢?

          答案就是:

          div:nth-child(1) {

          width: 300px;

          background-color: pink;

          flex-shrink: 2;

          }

          div:nth-child(2) {

          width: 200px;

          background-color: lightseagreen;

          flex-shrink: 3;

          }

          最終效果:

        圖片13

          讓我們來(lái)總結(jié)一下

          項(xiàng)目的屬性(添加在子元素身上的屬性)

          · Order屬性

          order屬性定義項(xiàng)目的排列順序。數(shù)值越小,排列越靠前,默認(rèn)為0。

          .item {

          order:;

          }

          · flex-basis屬性

          flex-basis屬性定義了在分配多余空間之前,項(xiàng)目占據(jù)的主軸空間(main size)。

          .item {

          flex-basis:| auto; /* default auto */

          }

          · align-self屬性

          align-self屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式,可覆蓋align-items屬性。默認(rèn)值為auto,表示繼承父元素的align-items屬性,如果沒有父元素,則等同于stretch。

          .item {

          align-self: auto | flex-start | flex-end | center | baseline | stretch;

          }

          · flex-grow屬性

          flex-grow屬性定義項(xiàng)目的放大比例,默認(rèn)為0,即如果存在剩余空間,也不放大。

          .item {

          flex-grow:; /* default 0 */

          }

          · flex-shrink屬性

          flex-shrink屬性定義了項(xiàng)目的縮小比例,默認(rèn)為1,即如果空間不足,該項(xiàng)目將縮小。

          .item {

          flex-shrink:; /* default 1 */

          }

        tags:
        聲明:本站稿件版權(quán)均屬千鋒教育所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
        10年以上業(yè)內(nèi)強(qiáng)師集結(jié),手把手帶你蛻變精英
        請(qǐng)您保持通訊暢通,專屬學(xué)習(xí)老師24小時(shí)內(nèi)將與您1V1溝通
        免費(fèi)領(lǐng)取
        今日已有369人領(lǐng)取成功
        劉同學(xué) 138****2860 剛剛成功領(lǐng)取
        王同學(xué) 131****2015 剛剛成功領(lǐng)取
        張同學(xué) 133****4652 剛剛成功領(lǐng)取
        李同學(xué) 135****8607 剛剛成功領(lǐng)取
        楊同學(xué) 132****5667 剛剛成功領(lǐng)取
        岳同學(xué) 134****6652 剛剛成功領(lǐng)取
        梁同學(xué) 157****2950 剛剛成功領(lǐng)取
        劉同學(xué) 189****1015 剛剛成功領(lǐng)取
        張同學(xué) 155****4678 剛剛成功領(lǐng)取
        鄒同學(xué) 139****2907 剛剛成功領(lǐng)取
        董同學(xué) 138****2867 剛剛成功領(lǐng)取
        周同學(xué) 136****3602 剛剛成功領(lǐng)取
        相關(guān)推薦HOT
        大數(shù)據(jù)測(cè)試工程師需要具備哪些技能?

        一、理解大數(shù)據(jù)概念大數(shù)據(jù)測(cè)試工程師需要理解大數(shù)據(jù)的基本概念和原理,如分布式存儲(chǔ)、MapReduce、實(shí)時(shí)計(jì)算等。他們還需要了解如何處理大規(guī)模的...詳情>>

        2023-10-14 23:43:03
        為什么SpringBoot的 jar 可以直接運(yùn)行?

        一、JAR文件的結(jié)構(gòu)與執(zhí)行方式Spring Boot的JAR包是Java Archive的縮寫,它是一種壓縮文件格式,可以將Java項(xiàng)目的類文件、資源文件以及依賴庫(kù)等...詳情>>

        2023-10-14 23:01:49
        站群服務(wù)器是什么?

        站群服務(wù)器的含義與用途站群服務(wù)器主要用于支持站群,即由一組相互鏈接的網(wǎng)站組成的群體。這些網(wǎng)站通常由同一組織或個(gè)人擁有,并且經(jīng)常會(huì)互相鏈...詳情>>

        2023-10-14 22:46:12
        自編碼器是什么?

        一、自編碼器原理自編碼器的設(shè)計(jì)靈感源于神經(jīng)科學(xué)中關(guān)于感知系統(tǒng)的認(rèn)知原理,它的核心思想是將輸入數(shù)據(jù)經(jīng)過(guò)編碼過(guò)程,形成一個(gè)隱藏層的特征表示...詳情>>

        2023-10-14 22:41:10
        什么是云網(wǎng)融合?

        一、云網(wǎng)融合的定義云網(wǎng)融合是指將云計(jì)算與網(wǎng)絡(luò)技術(shù)相結(jié)合,實(shí)現(xiàn)資源的共享、業(yè)務(wù)的協(xié)同,將網(wǎng)絡(luò)與云端服務(wù)深度融合,提供更靈活、高效、安全的...詳情>>

        2023-10-14 22:31:47
        鄯善县| 晋宁县| 克拉玛依市| 洞头县| 永修县| 庐江县| 根河市| 阿拉尔市| 伊通| 平山县| 江永县| 中山市| 龙陵县| 昭通市| 宜兴市| 正宁县| 漠河县| 鄂温| 宣化县| 上思县| 乐昌市| 高清| 中超| 庐江县| 涞水县| 孟村| 固安县| 虞城县| 乐平市| 临武县| 左云县| 平利县| 绥滨县| 苍山县| 屏东县| 渝中区| 丰原市| 江华| 青神县| 常熟市| 炉霍县|