日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢(xún)
選擇下列產(chǎn)品馬上在線(xiàn)溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案
Flexbox布局的正確使用姿勢(shì)

在項(xiàng)目中，我們還會(huì)大量使用到flexbox的新舊屬性，但大多數(shù)人一般只會(huì)寫(xiě)新屬性，舊屬性交由autoprefixer處理，但其實(shí)完成同樣功能的新舊屬性表現(xiàn)形式卻不盡相同。還有部分人只使用“萬(wàn)能”的flex:number屬性為伸縮項(xiàng)目分配空間，但有些特殊情景卻無(wú)法滿(mǎn)足，此文為此梳理了flexbox的新舊屬性區(qū)別和分配空間的原理，為大家用flexbox布局的項(xiàng)目通通渠。

創(chuàng)新互聯(lián)制作網(wǎng)站網(wǎng)頁(yè)找三站合一網(wǎng)站制作公司,專(zhuān)注于網(wǎng)頁(yè)設(shè)計(jì),成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì),網(wǎng)站設(shè)計(jì),企業(yè)網(wǎng)站搭建,網(wǎng)站開(kāi)發(fā),建網(wǎng)站業(yè)務(wù),680元做網(wǎng)站,已為成百上千服務(wù),創(chuàng)新互聯(lián)網(wǎng)站建設(shè)將一如既往的為我們的客戶(hù)提供最優(yōu)質(zhì)的網(wǎng)站建設(shè)、網(wǎng)絡(luò)營(yíng)銷(xiāo)推廣服務(wù)!

Flexbox兼容性

PC端的兼容性

移動(dòng)端的兼容性

如上圖，為了兼容IE10-11和Android4.3-，UC，我們?nèi)孕枰褂肍lexbox的舊屬性。

Flexbox新舊屬性

Flexbox的新屬性提供了很多舊版本沒(méi)有的功能，但是目前Android4.x和UC仍有一定市場(chǎng)占有率需要兼容，因此目前只使用新舊屬性都有的功能。

能實(shí)現(xiàn)相同功能的Flexbox新舊屬性如下表：

但想象是美好的，現(xiàn)實(shí)是殘酷的，新舊屬性里有那么幾個(gè)頑固分子并不能乖乖的表現(xiàn)的一樣，總有那么一點(diǎn)不同。

下面我們來(lái)看看是哪些新舊屬性有不同：

flex-direction:row-reverse vs box-orient:horizontal;box-direction:reverse

相同點(diǎn)：改變主軸方向和伸縮項(xiàng)目的排列順序;在ltr下伸縮項(xiàng)目從右到左排列。

不同點(diǎn)：

flex-direction:row-reverse：第一個(gè)伸縮項(xiàng)目向主軸起點(diǎn)對(duì)齊

box-orient:horizontal;box-direction:reverse：最后一個(gè)伸縮項(xiàng)目向主軸終點(diǎn)對(duì)齊

flex-direction:column-reverse vs box-orient:vertical;box-direction:reverse

相同點(diǎn)：改變主軸方向和伸縮項(xiàng)目的排列順序;在ltr下伸縮項(xiàng)目從下到上排列。

不同點(diǎn)：

flex-direction:column-reverse：第一個(gè)伸縮項(xiàng)目向主軸起點(diǎn)對(duì)齊。

box-orient:vertical;box-direction:reverse：最后一個(gè)伸縮項(xiàng)目向主軸終點(diǎn)對(duì)齊。

oreder:integer vs box-ordinal-group:integer

相同點(diǎn)：定義伸縮項(xiàng)目顯示順序。

不同點(diǎn)：

oreder:integer：默認(rèn)值為0;可以為負(fù)值。

box-ordinal-group:integer：默認(rèn)值為1;取值大于1。

flex-grow:number vs box-flex:number

相同點(diǎn)：定義伸縮項(xiàng)目的擴(kuò)展因素。

不同點(diǎn)：box-flex:number同時(shí)定義了伸縮項(xiàng)目的縮小因素。

flex-shrink:number vs box-flex:number

相同點(diǎn)：定義伸縮項(xiàng)目的縮小因素。

不同點(diǎn)：box-flex:number同時(shí)定義了伸縮項(xiàng)目的擴(kuò)展因素。

Flexbox分配空間原理

影響Flexbox布局分配空間的屬性有三個(gè)，分別是flex-grow、flex-shrink和flex-basis。

  • flex-grow：當(dāng)伸縮項(xiàng)目在主軸方向的總寬度
  • flex-shrink：當(dāng)伸縮項(xiàng)目在主軸方向的總寬度 > 伸縮容器，伸縮項(xiàng)目根據(jù)縮小因素分配總寬度超出伸縮容器的空間。
  • flex-basis：伸縮基礎(chǔ)，在進(jìn)行計(jì)算剩余空間或超出空間前，給伸縮項(xiàng)目重新設(shè)置一個(gè)寬度，然后再計(jì)算。

我們先來(lái)看看如何計(jì)算計(jì)算拉伸后的伸縮項(xiàng)目寬度，先簡(jiǎn)單明了的給個(gè)公式，再通過(guò)栗子來(lái)驗(yàn)證。

伸縮項(xiàng)目擴(kuò)展寬度 = (項(xiàng)目容器寬度 – 項(xiàng)目寬度或項(xiàng)目設(shè)置的flex-basis總和) * 對(duì)應(yīng)的flex-grow比例

拉伸后伸縮項(xiàng)目寬度 = 原伸縮項(xiàng)目寬度 + 擴(kuò)展寬度

 
 
 
 
    
  
  
  
  
  1. .flexbox-wrap{
    2. 
  
  
  
  
  2. 
  
  
  
  
  3.     width:550px;
    4. 
  
  
  
  
  4. 
  
  
  
  
  5.     display: flex;
    6. 
  
  
  
  
  6. 
  
  
  
  
  7. }
    8. 
  
  
  
  
  8. 
  
  
  
  
  9. .flexbox-item{
    10. 
  
  
  
  
  10. 
  
  
  
  
  11.     &:nth-child(1){
    12. 
  
  
  
  
  12. 
  
  
  
  
  13.         width:60px;
    14. 
  
  
  
  
  14. 
  
  
  
  
  15.     }
    16. 
  
  
  
  
  16. 
  
  
  
  
  17.     &:nth-child(2){
    18. 
  
  
  
  
  18. 
  
  
  
  
  19.         width:70px;
    20. 
  
  
  
  
  20. 
  
  
  
  
  21.     }
    22. 
  
  
  
  
  22. 
  
  
  
  
  23.     &:nth-child(3){
    24. 
  
  
  
  
  24. 
  
  
  
  
  25.         flex-basis:80px;
    26. 
  
  
  
  
  26. 
  
  
  
  
  27.     }
    28. 
  
  
  
  
  28. 
  
  
  
  
  29.     &:nth-child(4){
    30. 
  
  
  
  
  30. 
  
  
  
  
  31.         flex-basis:90px;
    32. 
  
  
  
  
  32. 
  
  
  
  
  33.     }
    34. 
  
  
  
  
  34. 
  
  
  
  
  35.     &:nth-child(5){
    36. 
  
  
  
  
  36. 
  
  
  
  
  37.          flex-basis:100px;
    38. 
  
  
  
  
  38. 
  
  
  
  
  39.     }
    40. 
  
  
  
  
  40. 
  
  
  
  
  41. }
    42. 
  
  
  
  
  42. 
  
  
  
  
  43. @for $i from 1 through 5 {
    44. 
  
  
  
  
  44. 
  
  
  
  
  45.     .flexbox-item:nth-child(#{$i}){
    46. 
  
  
  
  
  46. 
  
  
  
  
  47.         flex-grow: $i;
    48. 
  
  
  
  
  48. 
  
  
  
  
  49.         background-color: rgba(35 * (6-$i), 20 * $i, 35 * $i,1);
    50. 
  
  
  
  
  50. 
  
  
  
  
  51.     }
    52. 
  
  
  
  
  52. 
  
  
  
  
  53. }  
    54.

我們來(lái)計(jì)算一下上面栗子中第一個(gè)伸縮項(xiàng)目拉伸后的寬度。

對(duì)應(yīng)著公式一步步計(jì)算：

 
 
 
 
    
  
  
  
  
  1. // 項(xiàng)目容器寬度
    2. 
  
  
  
  
  2. 
  
  
  
  
  3. container = 550
    4. 
  
  
  
  
  4. 
  
  
  
  
  5. // 項(xiàng)目寬度或項(xiàng)目設(shè)置的flex-basis總和
    6. 
  
  
  
  
  6. 
  
  
  
  
  7. itemSum = 60 + 70 + 80 + 90 + 100 = 400
    8. 
  
  
  
  
  8. 
  
  
  
  
  9. // 第一個(gè)伸縮項(xiàng)目對(duì)應(yīng)的flex-grow比例
    10. 
  
  
  
  
  10. 
  
  
  
  
  11. flexRatio = 1 / ( 1 + 2 + 3 + 4 + 5 ) = 1/15
    12. 
  
  
  
  
  12. 
  
  
  
  
  13. // 第一個(gè)伸縮項(xiàng)目擴(kuò)展寬度
    14. 
  
  
  
  
  14. 
  
  
  
  
  15. extendWidth = ( 550 - 400 ) * 1/15 = 10
    16. 
  
  
  
  
  16. 
  
  
  
  
  17. // 第一個(gè)伸縮項(xiàng)目拉伸后的寬度
    18. 
  
  
  
  
  18. 
  
  
  
  
  19. itemWidth = 60 + 10 = 70 
    20.

計(jì)算后得到第一個(gè)伸縮項(xiàng)目拉伸后的寬度是70px，我們通過(guò)chrome上的盒子模型來(lái)看看是否正確

chrome計(jì)算的結(jié)果和我們計(jì)算的結(jié)果是一致的。

根據(jù)拉伸的計(jì)算公式是不是很容易就能推演出壓縮的計(jì)算公式呢?

伸縮項(xiàng)目縮小寬度 = (項(xiàng)目寬度或項(xiàng)目設(shè)置的flex-basis總和 – 項(xiàng)目容器寬度) * 對(duì)應(yīng)的flex-shrink比例

壓縮后伸縮項(xiàng)目寬度 = 原伸縮項(xiàng)目寬度 – 縮小寬度

繼續(xù)用個(gè)栗子來(lái)驗(yàn)證公式是否正確

 
 
 
 
    
  
  
  
  
  1. .flexbox-wrap{
    2. 
  
  
  
  
  2. 
  
  
  
  
  3.     width:250px;
    4. 
  
  
  
  
  4. 
  
  
  
  
  5.     display: flex;
    6. 
  
  
  
  
  6. 
  
  
  
  
  7. }
    8. 
  
  
  
  
  8. 
  
  
  
  
  9. .flexbox-item{
    10. 
  
  
  
  
  10. 
  
  
  
  
  11.     &:nth-child(1){
    12. 
  
  
  
  
  12. 
  
  
  
  
  13.         width:60px;
    14. 
  
  
  
  
  14. 
  
  
  
  
  15.     }
    16. 
  
  
  
  
  16. 
  
  
  
  
  17.     &:nth-child(2){
    18. 
  
  
  
  
  18. 
  
  
  
  
  19.         width:70px;
    20. 
  
  
  
  
  20. 
  
  
  
  
  21.     }
    22. 
  
  
  
  
  22. 
  
  
  
  
  23.     &:nth-child(3){
    24. 
  
  
  
  
  24. 
  
  
  
  
  25.         flex-basis:80px;
    26. 
  
  
  
  
  26. 
  
  
  
  
  27.     }
    28. 
  
  
  
  
  28. 
  
  
  
  
  29.     &:nth-child(4){
    30. 
  
  
  
  
  30. 
  
  
  
  
  31.         flex-basis:90px;
    32. 
  
  
  
  
  32. 
  
  
  
  
  33.     }
    34. 
  
  
  
  
  34. 
  
  
  
  
  35.     &:nth-child(5){
    36. 
  
  
  
  
  36. 
  
  
  
  
  37.          flex-basis:100px;
    38. 
  
  
  
  
  38. 
  
  
  
  
  39.     }
    40. 
  
  
  
  
  40. 
  
  
  
  
  41. }
    42. 
  
  
  
  
  42. 
  
  
  
  
  43. @for $i from 1 through 5 {
    44. 
  
  
  
  
  44. 
  
  
  
  
  45.     .flexbox-item:nth-child(#{$i}){
    46. 
  
  
  
  
  46. 
  
  
  
  
  47.         flex-shrink: $i;
    48. 
  
  
  
  
  48. 
  
  
  
  
  49.         background-color: rgba(35 * (6-$i), 20 * $i, 35 * $i,1);
    50. 
  
  
  
  
  50. 
  
  
  
  
  51.     }
    52. 
  
  
  
  
  52. 
  
  
  
  
  53. } 
    54.

我們來(lái)計(jì)算一下上面栗子中第一個(gè)伸縮項(xiàng)目壓縮后的寬度。

對(duì)應(yīng)著公式一步步計(jì)算：

 
 
 
 
    
  
  
  
  
  1. // 項(xiàng)目容器寬度
    2. 
  
  
  
  
  2. 
  
  
  
  
  3. container = 250
    4. 
  
  
  
  
  4. 
  
  
  
  
  5. // 項(xiàng)目寬度或項(xiàng)目設(shè)置的flex-basis總和
    6. 
  
  
  
  
  6. 
  
  
  
  
  7. itemSum = 60 + 70 + 80 + 90 + 100 = 400
    8. 
  
  
  
  
  8. 
  
  
  
  
  9. // 第一個(gè)伸縮項(xiàng)目對(duì)應(yīng)的flex-shrink比例
    10. 
  
  
  
  
  10. 
  
  
  
  
  11. flexRatio = 1 / ( 1 + 2 + 3 + 4 + 5 ) = 1/15
    12. 
  
  
  
  
  12. 
  
  
  
  
  13. // 第一個(gè)伸縮項(xiàng)目縮小寬度
    14. 
  
  
  
  
  14. 
  
  
  
  
  15. extendWidth = ( 400 - 250 ) * 1/15 = 10
    16. 
  
  
  
  
  16. 
  
  
  
  
  17. // 第一個(gè)伸縮項(xiàng)目壓縮后的寬度
    18. 
  
  
  
  
  18. 
  
  
  
  
  19. itemWidth = 60 - 10 = 50 
    20.

計(jì)算后得到第一個(gè)伸縮項(xiàng)目壓縮后的寬度是50px，我們通過(guò)chrome上的盒子模型來(lái)看看是否正確

chrome計(jì)算的結(jié)果和我們計(jì)算的結(jié)果不一樣。

伸縮項(xiàng)目壓縮的計(jì)算方式和拉伸的不一樣，是因?yàn)閴嚎s會(huì)有極端情況，我們把第一個(gè)伸縮項(xiàng)目的flex-shrink修改為10，此時(shí)縮小寬度為( 400 - 250 ) * ( 10 / 24) = 62.5，縮小的寬度比原寬度要大，計(jì)算的壓縮后的寬度變成了負(fù)數(shù)。

為了避免這種極端情況，計(jì)算縮小比例是要考慮伸縮項(xiàng)目的原寬度。

正確的公式是這樣的

伸縮項(xiàng)目縮小寬度 = (項(xiàng)目寬度或項(xiàng)目設(shè)置的flex-basis總和 – 項(xiàng)目容器寬度) (對(duì)應(yīng)的flex-shrink 項(xiàng)目寬度或項(xiàng)目設(shè)置的flex-basis比例)

壓縮后伸縮項(xiàng)目寬度 = 原伸縮項(xiàng)目寬度 – 縮小寬度

對(duì)應(yīng)著公式一步步計(jì)算：

 
 
 
 
    
  
  
  
  
  1. // 項(xiàng)目容器寬度
    2. 
  
  
  
  
  2. 
  
  
  
  
  3. container = 250
    4. 
  
  
  
  
  4. 
  
  
  
  
  5. // 項(xiàng)目寬度或項(xiàng)目設(shè)置的flex-basis總和
    6. 
  
  
  
  
  6. 
  
  
  
  
  7. itemSum = 60 + 70 + 80 + 90 + 100 = 400
    8. 
  
  
  
  
  8. 
  
  
  
  
  9. // 第一個(gè)伸縮項(xiàng)目對(duì)應(yīng)的flex-shrink比例
    10. 
  
  
  
  
  10. 
  
  
  
  
  11. flexRatio = (1*60) / (1*60+2*70+3*80+4*90+5*100) = 6/130
    12. 
  
  
  
  
  12. 
  
  
  
  
  13. // 第一個(gè)伸縮項(xiàng)目縮小寬度
    14. 
  
  
  
  
  14. 
  
  
  
  
  15. extendWidth = ( 400 - 250 ) * 6/130 ≈ 6.922
    16. 
  
  
  
  
  16. 
  
  
  
  
  17. // 第一個(gè)伸縮項(xiàng)目壓縮后的寬度
    18. 
  
  
  
  
  18. 
  
  
  
  
  19. itemWidth = 60 - 6.922 = 53.078 
    20.

計(jì)算后得到第一個(gè)伸縮項(xiàng)目壓縮后的寬度是53.078px，和chrome上的盒子模型是一樣的。

Flexbox屬性縮寫(xiě)陷阱

上面介紹的flex-grow、flex-shrink和flex-basis有一個(gè)縮寫(xiě)的寫(xiě)法flex。

flex: flex-grow [flex-shrink] [flex-basis]

flex各種縮寫(xiě)的值

  • flex: initial == flex: 0 1 auto
  • flex: none == flex: 0 0 auto
  • flex: auto == flex: 1 1 auto
  • flex: number == flex: number 1 0%

在實(shí)際項(xiàng)目中，會(huì)直接寫(xiě)使用縮寫(xiě)的flex來(lái)給伸縮項(xiàng)目分配空間，但是使用縮寫(xiě)屬性會(huì)留下一些陷阱，導(dǎo)致表現(xiàn)的結(jié)果不盡如人意。

分別使用flex和flex-grow來(lái)把伸縮項(xiàng)目拉伸填滿(mǎn)容器，看看表現(xiàn)的差異。

首先看看使用flex-grow拉伸伸縮項(xiàng)目的效果

 
 
 
 
    
  
  
  
  
  1. .flexbox-wrap{
    2. 
  
  
  
  
  2. 
  
  
  
  
  3.     width:550px;
    4. 
  
  
  
  
  4. 
  
  
  
  
  5.     display: flex;
    6. 
  
  
  
  
  6. 
  
  
  
  
  7. }
    8. 
  
  
  
  
  8. 
  
  
  
  
  9. .flexbox-item{
    10. 
  
  
  
  
  10. 
  
  
  
  
  11.     flex-grow:1;
    12. 
  
  
  
  
  12. 
  
  
  
  
  13.     &:nth-child(1){
    14. 
  
  
  
  
  14. 
  
  
  
  
  15.         width:60px;
    16. 
  
  
  
  
  16. 
  
  
  
  
  17.     }
    18. 
  
  
  
  
  18. 
  
  
  
  
  19.     &:nth-child(2){
    20. 
  
  
  
  
  20. 
  
  
  
  
  21.         width:70px;
    22. 
  
  
  
  
  22. 
  
  
  
  
  23.     }
    24. 
  
  
  
  
  24. 
  
  
  
  
  25.     &:nth-child(3){
    26. 
  
  
  
  
  26. 
  
  
  
  
  27.         width:80px;
    28. 
  
  
  
  
  28. 
  
  
  
  
  29.     }
    30. 
  
  
  
  
  30. 
  
  
  
  
  31.     &:nth-child(4){
    32. 
  
  
  
  
  32. 
  
  
  
  
  33.         width:90px;
    34. 
  
  
  
  
  34. 
  
  
  
  
  35.     }
    36. 
  
  
  
  
  36. 
  
  
  
  
  37.     &:nth-child(5){
    38. 
  
  
  
  
  38. 
  
  
  
  
  39.          width:100px;
    40. 
  
  
  
  
  40. 
  
  
  
  
  41.     }
    42. 
  
  
  
  
  42. 
  
  
  
  
  43. }
    44. 
  
  
  
  
  44. 
  
  
  
  
  45. @for $i from 1 through 5 {
    46. 
  
  
  
  
  46. 
  
  
  
  
  47.     .flexbox-item:nth-child(#{$i}){
    48. 
  
  
  
  
  48. 
  
  
  
  
  49.         background-color: rgba(35 * (6-$i), 20 * $i, 35 * $i,1);
    50. 
  
  
  
  
  50. 
  
  
  
  
  51.     }
    52. 
  
  
  
  
  52. 
  
  
  
  
  53. } 
    54.

每個(gè)伸縮項(xiàng)目在原寬度上拉伸相同的寬度

通過(guò)上面的計(jì)算拉伸后的伸縮項(xiàng)目寬度，可以計(jì)算第一個(gè)伸縮項(xiàng)目拉伸后的寬度

 
 
 
 
    
  
  
  
  
  1. // 項(xiàng)目容器寬度
    2. 
  
  
  
  
  2. 
  
  
  
  
  3. container = 550
    4. 
  
  
  
  
  4. 
  
  
  
  
  5. // 項(xiàng)目寬度或項(xiàng)目設(shè)置的flex-basis總和
    6. 
  
  
  
  
  6. 
  
  
  
  
  7. itemSum = 60 + 70 + 80 + 90 + 100 = 400
    8. 
  
  
  
  
  8. 
  
  
  
  
  9. // 第一個(gè)伸縮項(xiàng)目對(duì)應(yīng)的flex-grow比例
    10. 
  
  
  
  
  10. 
  
  
  
  
  11. flexRatio = 1 / ( 1 + 1 + 1 + 1 + 1 ) = 1/5
    12. 
  
  
  
  
  12. 
  
  
  
  
  13. // 第一個(gè)伸縮項(xiàng)目擴(kuò)展寬度
    14. 
  
  
  
  
  14. 
  
  
  
  
  15. extendWidth = ( 550 - 400 ) * 1/5 = 30
    16. 
  
  
  
  
  16. 
  
  
  
  
  17. // 第一個(gè)伸縮項(xiàng)目拉伸后的寬度
    18. 
  
  
  
  
  18. 
  
  
  
  
  19. itemWidth = 60 + 30 = 90  
    20.

然后我們把flex-grow:1替換成flex:1，下面是表現(xiàn)的效果，伸縮項(xiàng)目拉伸后的寬度變成一樣了。

從chrome的盒子模型可看到伸縮項(xiàng)目拉伸后寬度變成了110px，伸縮容器等分了容器的寬度。

flex:1展開(kāi)后是flex:1 1 0%，flex-grow:1相當(dāng)于flex:1 1 auto，兩者的區(qū)別在于flex-basis的值不同。flex:1為項(xiàng)目寬度重新設(shè)置了寬度為0，所以可分配空間為整個(gè)容器，從公式計(jì)算上可以更直觀(guān)理解：

 
 
 
 
    
  
  
  
  
  1. // 項(xiàng)目容器寬度
    2. 
  
  
  
  
  2. 
  
  
  
  
  3. container = 550
    4. 
  
  
  
  
  4. 
  
  
  
  
  5. // 項(xiàng)目寬度或項(xiàng)目設(shè)置的flex-basis總和
    6. 
  
  
  
  
  6. 
  
  
  
  
  7. itemSum = 0 + 0 + 0 + 0 + 0 = 0
    8. 
  
  
  
  
  8. 
  
  
  
  
  9. // 第一個(gè)伸縮項(xiàng)目對(duì)應(yīng)的flex-grow比例
    10. 
  
  
  
  
  10. 
  
  
  
  
  11. flexRatio = 1 / ( 1 + 1 + 1 + 1 + 1 ) = 1/5
    12. 
  
  
  
  
  12. 
  
  
  
  
  13. // 第一個(gè)伸縮項(xiàng)目擴(kuò)展寬度
    14. 
  
  
  
  
  14. 
  
  
  
  
  15. extendWidth = ( 550 - 0 ) * 1/5 = 110
    16. 
  
  
  
  
  16. 
  
  
  
  
  17. // 第一個(gè)伸縮項(xiàng)目拉伸后的寬度
    18. 
  
  
  
  
  18. 
  
  
  
  
  19. itemWidth = 0 + 110 = 110 
    20.

需要注意的Flexbox特性

無(wú)效屬性

  • column-*在伸縮容器無(wú)效
  • float和clear在伸縮項(xiàng)目無(wú)效
  • vertical-align在伸縮項(xiàng)目無(wú)效
  • ::first-line and ::first-letter在伸縮容器無(wú)效

伸縮容器中的非空字符文本節(jié)點(diǎn)也是伸縮項(xiàng)目

1 2 我是個(gè)假文本 3 4 5

margin折疊

  • 伸縮容器和伸縮項(xiàng)目的margin不會(huì)折疊
  • 伸縮項(xiàng)目間的margin不會(huì)折疊

舊版Flexbox的BUG

伸縮項(xiàng)目為行內(nèi)元素要加display:block;或display:flex


網(wǎng)站標(biāo)題：Flexbox布局的正確使用姿勢(shì)
文章分享：http://m.5511xx.com/article/dpojsdd.html