JasmineHua's blog

flex布局实践总结

发表于 | 分类于

前言

之前读完阮一峰的 Flex 布局教程：语法篇 与 Flex 布局教程：实例篇 后以为自己已经对这个布局算是比较理解，后在实践中倒是踩了不少坑。
接到的需求涉及到的基本上都是flex的弹性布局。也就是flex-grow，flex-shrink，flex-basis。彻底搞明白这三个属性就可以在一条线上随意排了。

flex属性

flex属性可以用来指定可伸缩长度的部件：扩展比率、收缩比率，以及伸缩基准值。当一个元素是伸缩项目时，「flex」属性将代替主轴长度属性决定元素的主轴长度。若元素不是伸缩项目，则「flex」属性没有效果。

  • flex-grow 是扩展比率。默认为0，即如果存在剩余空间，也不放大
  • flex-shrink 是收缩比率。默认为1，即如果空间不足，该项目将缩小
  • flex-basis 伸缩基准值。在分配多余空间之前，项目占据的主轴空间。它的默认值为auto，即项目的本来大小。

flex 的取值是以上三个属性值的组合。flex 的默认值是 0 1 auto。

下面总结了flex属性常见值的效果：
当 flex 取值正常时如下

1
2
3
4
5
6
.item {flex: 1 2 3px;}
.item {
    flex-grow: 1;
    flex-shrink: 2;
    flex-basis: 3px;
}

当 flex 取值为 none 时

1
2
3
4
5
6
.item {flex: none;}
.item {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
}

当 flex 取值为 auto 时

1
2
3
4
5
6
.item {flex: auto;}
.item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
}

当 flex 取值为 <positive-number> 时

1
2
3
4
5
6
.item {flex: 1;}
.item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}

当 flex 取值为 两个<positive-number> 时

1
2
3
4
5
6
.item {flex: 1 2;}
.item {
    flex-grow: 1;
    flex-shrink: 2;
    flex-basis: 0%;
}

当 flex 取值为 一个非负数字和一个长度或百分比或auto 时

1
2
3
4
5
6
.item {flex: 2 3px;}
.item {
    flex-grow: 2;
    flex-shrink: 1;
    flex-basis: 3px;
}

弹性布局实践小结

1. 要求：item1，item2宽度均随自身大小改变，外部容器宽一定。item2一直保持在该布局右侧，item1文本溢出时显示省略标记。

分析一下有两种可能：1.item1未溢出，即存在剩余空间。2.item1溢出，即空间不足。
解决方法也分为两种：
1.item2的flex-basis就应该是自身大小，并且在可能性1的情况下不放大，可能性2的情况下不缩小。所以item2添加flex-shrink: 0。
item1的flex-basis是自身大小，在可能性1的情况下都占据剩下大小，可能性2的情况下缩小。所以item2添加flex-grow: 1;。
2.item1的flex-basis是0。这样永远不会存在溢出，并占据所有剩下大小。所以item1添加flex: 1。item2不用添加。

2.要求：item1，item2宽度均随自身大小改变，外部容器宽一定。item2跟随在item1后，item1文本溢出时显示省略标记。

解决方法：item1为自身大小。有剩余空间不放大，空间不足时缩小。所以item1的flex应为默认值。
item2为自身大小。有剩余空间不放大，空间不足时不缩小。所以item2应添加flex-shrink: 0。

具体事例如下：

See the Pen mOKVMW by HUAHUA (@jasmineHUA) on CodePen.