Flexbox布局的正确使用姿势

在项目中，我们还会大量使用到flexbox的新旧属性，但大多数人一般只会写新属性，旧属性交由autoprefixer处理，但其实完成同样功能的新旧属性表现形式却不尽相同。还有部分人只使用“万能”的flex:number属性为伸缩项目分配空间，但有些特殊情景却无法满足，此文为此梳理了flexbox的新旧属性区别和分配空间的原理，为大家用flexbox布局的项目通通渠。

创新互联制作网站网页找三站合一网站制作公司,专注于网页设计,成都做网站、成都网站设计,网站设计,企业网站搭建,网站开发,建网站业务,680元做网站,已为成百上千服务,创新互联网站建设将一如既往的为我们的客户提供最优质的网站建设、网络营销推广服务!

Flexbox兼容性

PC端的兼容性

移动端的兼容性

如上图，为了兼容IE10-11和Android4.3-，UC，我们仍需要使用Flexbox的旧属性。

Flexbox新旧属性

Flexbox的新属性提供了很多旧版本没有的功能，但是目前Android4.x和UC仍有一定市场占有率需要兼容，因此目前只使用新旧属性都有的功能。

能实现相同功能的Flexbox新旧属性如下表：

但想象是美好的，现实是残酷的，新旧属性里有那么几个顽固分子并不能乖乖的表现的一样，总有那么一点不同。

下面我们来看看是哪些新旧属性有不同：

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

相同点：改变主轴方向和伸缩项目的排列顺序;在ltr下伸缩项目从右到左排列。

不同点：

flex-direction:row-reverse：第一个伸缩项目向主轴起点对齐

box-orient:horizontal;box-direction:reverse：最后一个伸缩项目向主轴终点对齐

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

相同点：改变主轴方向和伸缩项目的排列顺序;在ltr下伸缩项目从下到上排列。

不同点：

flex-direction:column-reverse：第一个伸缩项目向主轴起点对齐。

box-orient:vertical;box-direction:reverse：最后一个伸缩项目向主轴终点对齐。

oreder:integer vs box-ordinal-group:integer

相同点：定义伸缩项目显示顺序。

不同点：

oreder:integer：默认值为0;可以为负值。

box-ordinal-group:integer：默认值为1;取值大于1。

flex-grow:number vs box-flex:number

相同点：定义伸缩项目的扩展因素。

不同点：box-flex:number同时定义了伸缩项目的缩小因素。

flex-shrink:number vs box-flex:number

相同点：定义伸缩项目的缩小因素。

不同点：box-flex:number同时定义了伸缩项目的扩展因素。

Flexbox分配空间原理

影响Flexbox布局分配空间的属性有三个，分别是flex-grow、flex-shrink和flex-basis。

  • flex-grow：当伸缩项目在主轴方向的总宽度
  • flex-shrink：当伸缩项目在主轴方向的总宽度 > 伸缩容器，伸缩项目根据缩小因素分配总宽度超出伸缩容器的空间。
  • flex-basis：伸缩基础，在进行计算剩余空间或超出空间前，给伸缩项目重新设置一个宽度，然后再计算。

我们先来看看如何计算计算拉伸后的伸缩项目宽度，先简单明了的给个公式，再通过栗子来验证。

伸缩项目扩展宽度 = (项目容器宽度 – 项目宽度或项目设置的flex-basis总和) * 对应的flex-grow比例

拉伸后伸缩项目宽度 = 原伸缩项目宽度 + 扩展宽度

 
 
 
 
    
  
  
  
  
  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.

我们来计算一下上面栗子中第一个伸缩项目拉伸后的宽度。

对应着公式一步步计算：

 
 
 
 
    
  
  
  
  
  1. // 项目容器宽度
    2. 
  
  
  
  
  2. 
  
  
  
  
  3. container = 550
    4. 
  
  
  
  
  4. 
  
  
  
  
  5. // 项目宽度或项目设置的flex-basis总和
    6. 
  
  
  
  
  6. 
  
  
  
  
  7. itemSum = 60 + 70 + 80 + 90 + 100 = 400
    8. 
  
  
  
  
  8. 
  
  
  
  
  9. // 第一个伸缩项目对应的flex-grow比例
    10. 
  
  
  
  
  10. 
  
  
  
  
  11. flexRatio = 1 / ( 1 + 2 + 3 + 4 + 5 ) = 1/15
    12. 
  
  
  
  
  12. 
  
  
  
  
  13. // 第一个伸缩项目扩展宽度
    14. 
  
  
  
  
  14. 
  
  
  
  
  15. extendWidth = ( 550 - 400 ) * 1/15 = 10
    16. 
  
  
  
  
  16. 
  
  
  
  
  17. // 第一个伸缩项目拉伸后的宽度
    18. 
  
  
  
  
  18. 
  
  
  
  
  19. itemWidth = 60 + 10 = 70 
    20.

计算后得到第一个伸缩项目拉伸后的宽度是70px，我们通过chrome上的盒子模型来看看是否正确

chrome计算的结果和我们计算的结果是一致的。

根据拉伸的计算公式是不是很容易就能推演出压缩的计算公式呢?

伸缩项目缩小宽度 = (项目宽度或项目设置的flex-basis总和 – 项目容器宽度) * 对应的flex-shrink比例

压缩后伸缩项目宽度 = 原伸缩项目宽度 – 缩小宽度

继续用个栗子来验证公式是否正确

 
 
 
 
    
  
  
  
  
  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.

我们来计算一下上面栗子中第一个伸缩项目压缩后的宽度。

对应着公式一步步计算：

 
 
 
 
    
  
  
  
  
  1. // 项目容器宽度
    2. 
  
  
  
  
  2. 
  
  
  
  
  3. container = 250
    4. 
  
  
  
  
  4. 
  
  
  
  
  5. // 项目宽度或项目设置的flex-basis总和
    6. 
  
  
  
  
  6. 
  
  
  
  
  7. itemSum = 60 + 70 + 80 + 90 + 100 = 400
    8. 
  
  
  
  
  8. 
  
  
  
  
  9. // 第一个伸缩项目对应的flex-shrink比例
    10. 
  
  
  
  
  10. 
  
  
  
  
  11. flexRatio = 1 / ( 1 + 2 + 3 + 4 + 5 ) = 1/15
    12. 
  
  
  
  
  12. 
  
  
  
  
  13. // 第一个伸缩项目缩小宽度
    14. 
  
  
  
  
  14. 
  
  
  
  
  15. extendWidth = ( 400 - 250 ) * 1/15 = 10
    16. 
  
  
  
  
  16. 
  
  
  
  
  17. // 第一个伸缩项目压缩后的宽度
    18. 
  
  
  
  
  18. 
  
  
  
  
  19. itemWidth = 60 - 10 = 50 
    20.

计算后得到第一个伸缩项目压缩后的宽度是50px，我们通过chrome上的盒子模型来看看是否正确

chrome计算的结果和我们计算的结果不一样。

伸缩项目压缩的计算方式和拉伸的不一样，是因为压缩会有极端情况，我们把第一个伸缩项目的flex-shrink修改为10，此时缩小宽度为( 400 - 250 ) * ( 10 / 24) = 62.5，缩小的宽度比原宽度要大，计算的压缩后的宽度变成了负数。

为了避免这种极端情况，计算缩小比例是要考虑伸缩项目的原宽度。

正确的公式是这样的

伸缩项目缩小宽度 = (项目宽度或项目设置的flex-basis总和 – 项目容器宽度) (对应的flex-shrink 项目宽度或项目设置的flex-basis比例)

压缩后伸缩项目宽度 = 原伸缩项目宽度 – 缩小宽度

对应着公式一步步计算：

 
 
 
 
    
  
  
  
  
  1. // 项目容器宽度
    2. 
  
  
  
  
  2. 
  
  
  
  
  3. container = 250
    4. 
  
  
  
  
  4. 
  
  
  
  
  5. // 项目宽度或项目设置的flex-basis总和
    6. 
  
  
  
  
  6. 
  
  
  
  
  7. itemSum = 60 + 70 + 80 + 90 + 100 = 400
    8. 
  
  
  
  
  8. 
  
  
  
  
  9. // 第一个伸缩项目对应的flex-shrink比例
    10. 
  
  
  
  
  10. 
  
  
  
  
  11. flexRatio = (1*60) / (1*60+2*70+3*80+4*90+5*100) = 6/130
    12. 
  
  
  
  
  12. 
  
  
  
  
  13. // 第一个伸缩项目缩小宽度
    14. 
  
  
  
  
  14. 
  
  
  
  
  15. extendWidth = ( 400 - 250 ) * 6/130 ≈ 6.922
    16. 
  
  
  
  
  16. 
  
  
  
  
  17. // 第一个伸缩项目压缩后的宽度
    18. 
  
  
  
  
  18. 
  
  
  
  
  19. itemWidth = 60 - 6.922 = 53.078 
    20.

计算后得到第一个伸缩项目压缩后的宽度是53.078px，和chrome上的盒子模型是一样的。

Flexbox属性缩写陷阱

上面介绍的flex-grow、flex-shrink和flex-basis有一个缩写的写法flex。

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

flex各种缩写的值

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

在实际项目中，会直接写使用缩写的flex来给伸缩项目分配空间，但是使用缩写属性会留下一些陷阱，导致表现的结果不尽如人意。

分别使用flex和flex-grow来把伸缩项目拉伸填满容器，看看表现的差异。

首先看看使用flex-grow拉伸伸缩项目的效果

 
 
 
 
    
  
  
  
  
  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.

每个伸缩项目在原宽度上拉伸相同的宽度

通过上面的计算拉伸后的伸缩项目宽度，可以计算第一个伸缩项目拉伸后的宽度

 
 
 
 
    
  
  
  
  
  1. // 项目容器宽度
    2. 
  
  
  
  
  2. 
  
  
  
  
  3. container = 550
    4. 
  
  
  
  
  4. 
  
  
  
  
  5. // 项目宽度或项目设置的flex-basis总和
    6. 
  
  
  
  
  6. 
  
  
  
  
  7. itemSum = 60 + 70 + 80 + 90 + 100 = 400
    8. 
  
  
  
  
  8. 
  
  
  
  
  9. // 第一个伸缩项目对应的flex-grow比例
    10. 
  
  
  
  
  10. 
  
  
  
  
  11. flexRatio = 1 / ( 1 + 1 + 1 + 1 + 1 ) = 1/5
    12. 
  
  
  
  
  12. 
  
  
  
  
  13. // 第一个伸缩项目扩展宽度
    14. 
  
  
  
  
  14. 
  
  
  
  
  15. extendWidth = ( 550 - 400 ) * 1/5 = 30
    16. 
  
  
  
  
  16. 
  
  
  
  
  17. // 第一个伸缩项目拉伸后的宽度
    18. 
  
  
  
  
  18. 
  
  
  
  
  19. itemWidth = 60 + 30 = 90  
    20.

然后我们把flex-grow:1替换成flex:1，下面是表现的效果，伸缩项目拉伸后的宽度变成一样了。

从chrome的盒子模型可看到伸缩项目拉伸后宽度变成了110px，伸缩容器等分了容器的宽度。

flex:1展开后是flex:1 1 0%，flex-grow:1相当于flex:1 1 auto，两者的区别在于flex-basis的值不同。flex:1为项目宽度重新设置了宽度为0，所以可分配空间为整个容器，从公式计算上可以更直观理解：

 
 
 
 
    
  
  
  
  
  1. // 项目容器宽度
    2. 
  
  
  
  
  2. 
  
  
  
  
  3. container = 550
    4. 
  
  
  
  
  4. 
  
  
  
  
  5. // 项目宽度或项目设置的flex-basis总和
    6. 
  
  
  
  
  6. 
  
  
  
  
  7. itemSum = 0 + 0 + 0 + 0 + 0 = 0
    8. 
  
  
  
  
  8. 
  
  
  
  
  9. // 第一个伸缩项目对应的flex-grow比例
    10. 
  
  
  
  
  10. 
  
  
  
  
  11. flexRatio = 1 / ( 1 + 1 + 1 + 1 + 1 ) = 1/5
    12. 
  
  
  
  
  12. 
  
  
  
  
  13. // 第一个伸缩项目扩展宽度
    14. 
  
  
  
  
  14. 
  
  
  
  
  15. extendWidth = ( 550 - 0 ) * 1/5 = 110
    16. 
  
  
  
  
  16. 
  
  
  
  
  17. // 第一个伸缩项目拉伸后的宽度
    18. 
  
  
  
  
  18. 
  
  
  
  
  19. itemWidth = 0 + 110 = 110 
    20.

需要注意的Flexbox特性

无效属性

  • column-*在伸缩容器无效
  • float和clear在伸缩项目无效
  • vertical-align在伸缩项目无效
  • ::first-line and ::first-letter在伸缩容器无效

伸缩容器中的非空字符文本节点也是伸缩项目

1 2 我是个假文本 3 4 5

margin折叠

  • 伸缩容器和伸缩项目的margin不会折叠
  • 伸缩项目间的margin不会折叠

旧版Flexbox的BUG

伸缩项目为行内元素要加display:block;或display:flex

分享文章：Flexbox布局的正确使用姿势
链接URL：http://www.gawzjz.com/qtweb/news23/189523.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

面包屑导航知识

同城分类信息

新网创想　　 　乐山中领科信　　 　马边网站建设　　 　江油网站建设　　 　响应式网站　　 　成都棕数机房　　 　seo推广公司　　 　响应式网站　　 　成都免费做网站　　 　四川柴油发电机　　 　网站解决方案　　 　成都酒店服定制　　 　成都网站推广　　 　成都光华机房服务器托管　　 　四川黔盛装饰　　 　复盛机电设备　　 　达州网站制作　　 　成都品牌网站设计　　 　成都网站推广　　 　虚拟主机