成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

flex 彈性布局

Caicloud / 2331人閱讀

摘要：高度要撐開橫排換行產(chǎn)生多軸嘗試添加代碼可以說，布局在父元素上對子元素垂直方向的控制還是非常到位和明確的子元素屬性探究大概可以理解為子元素的排隊號碼，默認(rèn)都是，越大排隊越后可以看到，號因為設(shè)置為排到了后面而號因為更加大的而排到最后。

案例基礎(chǔ)布局

html

    
    
        
  • 
        
  • 
        
  • 
        
  •

css

        .box{
            display: -webkit-flex;
            display: flex;
        }
        .item{
            width: 200px;
            height: 300px;
            background: red;
            border: 1px solid #ccc;
            font-size: 50px;
            text-align: center;
            line-height: 300px;
            color:#fff;
        }

因為flex主要方便與移動端布局，所以測試以谷歌模擬移動端看效果：

因為使用 flex 布局，子元素默認(rèn)是橫向排列，所以不需要float，也不起作用；
父盒子屬性探究 flex-direction

flex-direction 表示子元素的排列方向和順序；默認(rèn) row （橫排，左到右）； row-reverse 表示 橫排右到左

.box{
            display: -webkit-flex;
            display: flex;
            flex-direction:row-reverse;    
        }

如果每個把每個 li 設(shè)置為 width：3000px;(當(dāng)前屏幕寬度980px),效果：

子元素寬度超出，不但沒有換行，會自動適應(yīng)大小，平分為 25%；

上面的平分 只是在 row 的時候 會平分，如果是換成豎向排列：

 flex-direction: column;

元素不會被擠壓了，擁有3000px寬；但是要注意，它不是因為不夠空間而換行了，只是column 值規(guī)定了它 豎向排列
下面的值可以調(diào)整為 倒序豎向排列

 flex-direction: column-reverse;  //表示元素豎直 反向排
flex-wrap

flex-wrap 默認(rèn) nowrap：不換行。上面的3000px 子元素正是因為 這個豎向默認(rèn)是不會換行的，所以 上面設(shè)置3000px寬，不會換行；

同樣的代碼，如果加多一句

.box{
            display: -webkit-flex;
            display: flex;
            flex-direction: row-reverse;
            flex-wrap: wrap;    //換行，第一行在上方。
        }

可以發(fā)現(xiàn)，設(shè)置為可以換行以后，子元素寬度變?yōu)?00%屏幕寬了；這就像一個彈性盒子塞到了比自己小的盒子中，彈性盒子自動收縮了自己的寬度。

如果這樣寫：

.box{
            display: -webkit-flex;
            display: flex;
            flex-direction: row-reverse;
            flex-wrap: wrap-reverse;    //換行，第一行在下方。
        }

flex-flow

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認(rèn)值為row nowrap。

flex-flow：row wrap  ===  flex-direction:row; flex-wrap: wrap

代碼又改一下：

.box{
      display: -webkit-flex;
      display: flex;
      flex-direction: row-reverse;
      flex-wrap: wrap-reverse;
    }
    
  可以寫成

.box{
      display: -webkit-flex;
      display: flex;
      flex-flow:row-veverse wrap-reverse
    }
justify-content

它有五個值，其中如果把 item 比做word文檔的文字的話, flex-star 可以看做是左對齊， flex-end： 右對齊； flex-center： 居中；

重點(diǎn)介紹值 space-around:平分內(nèi)容空余空間，每個項目兩側(cè)的間隔相等;
設(shè)空余空間為 area，有子元素 k個，每個子元素等于增加了多少margin？==> area/2k

本例子：

.item{
    width:200px;
}
.box{
       display: -webkit-flex;
       display: flex;
       justify-content: space-around;
}

值得注意的是，項目之間的間隔比項目與邊框的間隔大一倍。

space-between：兩端對齊，項目之間的間隔都相等。不給

align-items

align 字樣基本就知道它是針對 垂直方向的了；

.box{
            display: -webkit-flex;
            display: flex;
            justify-content: space-between;
            height: 1760px;
            align-items: center;

        }

記得給父加一個高度；這樣子可以看出元素垂直居中了

其他的相似的屬性就不再一一寫了

flex-start：交叉軸的起點(diǎn)對齊。
flex-end：交叉軸的終點(diǎn)對齊。
stretch（默認(rèn)值）：如果項目未設(shè)置高度或設(shè)為auto，將占滿整個容器的高度。

看 baseline屬性: 項目的第一行文字的基線對齊。

這個屬性 比較新穎，可以試試：

.box{
     align-items: baseline;
     }
     
    
    
        
  • 1
    • 
        
  • 2
    • 
        
  • 3
    • 
        
  • 4
    •

上面我給每個item 都設(shè)置了 不同的高度 和 line-height;

可以看到 容器為了讓文字對齊 而調(diào)整自己的位置；

align-content

定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。

.box{
            height: 1760px;   //高度要撐開
            display: -webkit-flex;
            display: flex;
            justify-content: space-between;
            flex-flow: row wrap; //橫排 換行；產(chǎn)生多軸

        }
        
        

    
        
  • 1
    • 
        
  • 2
    • 
        
  • 3
    • 
        
  • 4
    • 
        
  • 5
    • 
        
  • 6
    • 
        
  • 7
    • 
        
  • 8
    • 
        
  • 9
    •

嘗試添加 代碼

align-content: flex-end;

align-content:space-around;

align-content:space-between;

align-content : center;

可以說，flex布局在父元素上對子元素垂直方向的控制還是非常到位和明確的；

子元素屬性探究 order

大概可以理解為子元素的排隊號碼，默認(rèn)都是0，越大排隊越后；

    
        
  • 1
    • 
        
  • 2
    • 
        
  • 3
    • 
        
  • 4
    • 
        
  • 5
    • 
        
  • 6
    • 
        
  • 7
    • 
        
  • 8
    • 
        
  • 9
    •

可以看到，1 號因為 order 設(shè)置為10排到了后面； 而2號因為更加大的order 而排到最后。

flex-grow 多余空間分配比例

它的值是一個number，默認(rèn)為0；只要有一個同軸元素被設(shè)定了flex-grow ，所有多余空間都會按照這個比例分配，并讓元素占滿整行。這個被分配的空間，是算在自身里面的；

    
        
  • 1
    • 
        
  • 2
    • 
        
  • 3
    • 
        
  • 4
    • 
        
  • 5
    • 
        
  • 6
    • 
        
  • 7
    • 
        
  • 8
    • 
        
  • 9
    •

盒子寬度變大了，（就是grow啦）

如果子元素有margin，那么會先計算橫排多少個，再決定 flex-grow 分配的空間是多少

例如如下代碼，

//沒有設(shè)定 flex-grow 時
 
  • 1
    • 
 
  • 2

    • //設(shè)定了 flex-grow 時
 
  • 1
    • 
 
  • 2

    • 所以，margin 并不算 多余空間 ，不會被重新分配；

    flex-shrink

    此屬性與 flex-grow 有點(diǎn)相反的意思，用于處理 不換行時，內(nèi)容超出屏幕了，應(yīng)該決定誰來縮??；
    值越大 縮小比例越大；默認(rèn)是 1

    改一下代碼；

    .box{
    flex-flow:row nowrap;
}


      
        
    • 1
      • 
        
    • 2
      • 
        
    • 3
      • 
        
    • 4
      • 
        
    • 5
      •

    此時 父盒子規(guī)定不能換行；但是5個item 寬度已經(jīng)超過屏幕寬了；此時大家是等比縮小

    下面設(shè)置1號 flex-shrink：600

      
        
    • 1
      • 
        
    • 2
      • 
        
    • 3
      • 
        
    • 4
      • 
        
    • 5
      •


    可以看到，盡管我把1號設(shè)置到縮放非常大了，但是實際寬度并沒有很?。徽f明瀏覽器會自己決定內(nèi)容是否已經(jīng)足夠放下，夠了就停止縮放；

      
        
    • 1
      • 
        
    • 2
      • 
        
    • 3
      • 
        
    • 4
      • 
        
    • 5
      • 
        
    • 6
      • 
        
    • 7
      • 
        
    • 8
      • 
        
    • 9
      •

    當(dāng)內(nèi)容非常多時，1號就明顯被縮放得非常厲害，同時我發(fā)現(xiàn)，4號盡管設(shè)置200，但是它的大小跟被設(shè)為600的 1號是一樣的。

    這是因為他們已經(jīng)縮放到最后只能容納文字的空間了；所以就不會再縮放下去；這跟文字占位一個道理

    flex-basis

    屬性定義了在分配多余空間之前，項目占據(jù)的主軸空間（main size）。瀏覽器根據(jù)這個屬性，計算主軸是否有多余空間。它的默認(rèn)值為auto，即項目的本來大小。

    簡單來說，就是這個值會影響瀏覽器計算的輸入值，有四種情況

    1，本來就會超出，然后你設(shè)定的值比原值低（原值200px每個item），你的元素會被壓縮。

     
      
        
    • 1
      • 
        
    • 2
      • 
        
    • 3
      • 
        
    • 4
      • 
        
    • 5
      • 
        
    • 6
      • 
        
    • 7
      • 
        
    • 8
      • 
        
    • 9
      •

    1，本來就會超出，然后你設(shè)定的值比原值大，你的元素會被相對放大些。

      
        
    • 1
      • 
        
    • 2
      • 
        
    • 3
      • 
        
    • 4
      • 
        
    • 5
      • 
        
    • 6
      • 
        
    • 7
      • 
        
    • 8
      • 
        
    • 9
      •

    3 本來不會超出，你設(shè)定的值比原來小，你還是會小一點(diǎn)

     
      
        
    • 1
      • 
        
    • 2
      • 
        
    • 3
      •

    4 本來不會超出，你設(shè)定的值比原來大，你就會更大

      
        
    • 1
      • 
        
    • 2
      • 
        
    • 3
      •

    這個值你可以當(dāng)做寬度來看，當(dāng)設(shè)定為 跟原來一樣的值得時候，基本沒有變化

      
        
    • 1
      • 
        
    • 2
      • 
        
    • 3
      •


    align-self

    此子元素多帶帶設(shè)置垂直方向?qū)R方式；默認(rèn)auto 表示父親怎么定義就怎么來；其他值跟align-items是一樣的

      
        
    • 1
      • 
        
    • 2
      • 
        
    • 3
      • 
        
    • 4
      • 
        
    • 5
      •

    此屬性主要是方便特殊定位 某個字元素

    flex屬性

    是flex-grow, flex-shrink 和 flex-basis的簡寫，默認(rèn)值為0 1 auto。后兩個屬性可選。

    .item {
  flex: none | [ <"flex-grow"> <"flex-shrink">? || <"flex-basis"> ]
}

    該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。
    建議優(yōu)先使用這個屬性，而不是多帶帶寫三個分離的屬性，因為瀏覽器會推算相關(guān)值。

    實踐技巧 情景一： 右邊div 固定，左邊自動分布空間；

    上圖，去結(jié)算 要固定寬度并靠右顯示；左邊兩個 價格自由分配 剩余空間；

    布局(本案例是小程序) 
    
    
      已經(jīng)優(yōu)惠 ￥{{discounts}}
      
        合計 ￥{{account-discounts}}
      
    
    
      去結(jié)算
    css： 
    .order-bottom{
  display: flex;
  justify-content: space-between;
}
.bot-left{
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex: 1;
}
.to-pay{
  width: 220rpx;
  height: 100%;
}
    情景二：右邊固定高度，左邊文字垂直居中

    布局 
    
  備注：