Flex布局陷阱及解决方法

Flex弹性布局，是一种CSS布局模式，flex布局能够使我们很轻松地设计复杂的二维布局结构，使内容区域大小随屏幕或页面分辨率动态改变，且不会破坏原有布局。

Flex弹性布局几乎成为我日常开发中不可缺少的工具，它让我轻松的设计出自适应分辨率的布局，提高了工作效率。

现结合我日常工作，提出两个Flex布局的陷阱，分析其解决方法，一般我们遇到的问题都能够通过合理利用Flex规则解决，而不能被合理解决的问题，我将其称之为陷阱。

陷阱一：flex-grow 陷阱

陷阱描述：

当我们需要对定义了flex布局的div或其他元素（之后统一成为容器）的剩余空间按比例进行分配时，就会用到flex-grow属性，比如我们需要对flex容器按1:2:1的比例分配时，我们可以对容器内的三个元素（比如div）分别设置其css属性：

.flex-item1{
    flex-grow:1;
}
.flex-item2{
    flex-grow:2;
}
.flex-item3{
    flex-grow:1;
}

当然，我们希望能够按着flex-grow的分配规则，将容器按我们想要的比例来设计布局，理应如下图：

但实际情况有时候会事与愿违，如果内容比较多，flex容器的宽度会随着容器内的内容自动拉伸，无法按预设比例进行布局，即便是设置了flex-shrink:0（不允许压缩容器大小）和word-break（强制换行），也无法解决这个问题，实际如下图：

 解决方法：

给每个设置了flex-grow属性的元素，设置width:1px;就解决了，娃哈哈~，简单吧！

.flex-item1, .flex-item2, .flex-item3{
    width:1px;
}

是同一个容器下的，每个设置了flex-grow属性的元素，强调：每个。效果如下：

至于原理是啥，就不求甚解吧。

陷二：卡片分页排布陷阱

陷阱描述：

很多场景下，我们会用到卡片式分页布局，比如电子商城搜索列表页，视频网站视频搜索页，当然也包括我们自身所从事的业务场景等等。我们设想一下场景：

设计卡片分页，要求：1、卡片4行5列为一页；2、能够在一定范围内，随着页面分辨率自适应，且不影响页面美观；

实现上述场景，大致有三种思路：

1. 通过盒子模型，设置容器宽度的百分比，这样容器大小，可根据分辨率进行自适应调整；
2. 通过flex弹性布局+宽度百分比，可实现元素弹性收缩，紧随页面分辨率；
3. 通过css的媒体查询，针对几个特定分辨率设置不同的大小和边界。

我个人喜欢用第二种方法，通过flex弹性布局+宽度百分比，我认为这种方法最快也最有效，但也会遇到一些问题，如果最后一页的卡片数量，没有占满一页，或最后一行，没有占满一行，布局上会有一些影响，例如：

下图使用 justify-content: space-around; 进行布局，瑕疵是在最后一行出现几个不可饶恕的空白，画红圈儿的部分。

使用justify-content: space-around;进行布局

下图使用 justify-content: space-between;进行布局，瑕疵是两边没有留白，以及三个让人讨厌的空白。

使用justify-content: space-between; 进行布局

这两种方式都有不完美的地方，而作为一个严谨的前段工程师，这种不完美是不能接受的。当然，不用flex布局，使用其他的布局方式，也能解决这个问题，这里主要还是想记录flex布局在这种情况下的解决方法。

解决方法：

如果是4行5列，那么在最后面加上4个与item相同属性的空元素，高度设置为0：height:0px;透明度设置为0：opacity:0;这样就能解决了，如果是n行m列，就在列表最后加m-1个空元素即可。

 效果如下图：

空元素在最后一行

 这种方案其实也有一点点瑕疵，那就是多出来的空元素虽然不可见，但是多多少少影响了最后一行的布局，使最后一行占的空间比其他的行都大，所以最后一行下方的空白，比较多，如下图：

最后一行包含空元素

还好，这多出来的空白，可以用下一行的元素进行弥补，下面内容的空白留少一点就解决了。