工作中遇到的特殊CSS布局

日常开发中，设计师总会提出各种奇思妙想的需求，为我们的UI还原工作带来很多挑战。虽然有时确实会让我们花蛮多时间去实现，但从一方面想这也是个机会，让我们更深入了解的浏览器布局方式。本文主要记录之前工作中遇到的特殊布局，都是通过CSS方式去实现。
多条件留白布局

图中有两个内容块A和B，他们宽度取决于内容宽度，左右侧留白有max-width: 200px限制，中间留白有min-width: 150px限制。如果父级宽度缩小，中间留白一直保持着150px宽度，左右侧留白宽度跟随父级宽度缩小。如下图所示：

从需求的描述来看，需要的是同时支持弹性(宽度随父级宽度而改变)和限制条件(max-width、min-width)的属性。一提起弹性，自然而然的就想到flex布局，只要加入占位的元素，可使用before或after伪类或手动插入元素，然后加上flex: 1和限制条件即可。

在线预览：

codesandbox 地址

代码：
中间文本截断

需求：对于文件名，在页面中一定要显示文件扩展名，非扩展名部分溢出时显示省略号。
短文件名：

长文件名：
首先需要使用JS对文件名进行裁剪，拆分出两部分：非扩展名部分和扩展名部分，放置在两个相邻的元素中。当文件名宽度 <= 父级宽度时，左侧元素和右侧元素宽度为各自内部文字宽度。当文件名宽度 > 父级宽度时，左侧元素宽度取决于内容，达到最大值后文本截断显示缩略号，右侧元素随左侧元素向右移，一直保持自身宽度不缩放。

对于这样的问题，很自然的就想到flex-shrink。flex-shrink用来设置当父元素的宽度小于所有子元素的宽度的和时（即子元素会超出父元素），子元素如何缩小自己的宽度。

在线预览：

codesandbox 地址

代码：

这个方法有个瑕疵，就是缩略符与右侧字符存在一定空隙，不过字体小的时候不太明显。使用JS能解决这个问题，但是用JS实现需要计算字符所占宽度。因为字符的宽度不一致，不能使用字体大小*字体长度的方式，需要将字符插入一个元素，然后获取元素的宽度。对于一个长列表来说，这个方式太耗性能。权衡利弊之下，所以选择flex去实现。

竖向排列

需求：实现类似于下图中竖向排列的布局，父元素高度限定，宽度取决于子元素，子元素宽高取决于内容，子元素从上到下，从左到右排序。

一开始想着使用flex-flow: column wrap能快速实现，但事宜愿为，顺带发现了flex布局的缺点。我给父级元素加了border，从而可以看出父元素的宽度。

设置了flex-flow: column wrap；align-content: flex-start;后，父元素宽度仍然是百分百，但需求是宽度取决于子元素宽度，这时需要再加个display: inline-block元素。

加了inline-block元素后，父元素的宽度只等于一列子元素的宽度，明显不符合预期。如果不使用display: flex，而使用display: inline-flex呢？

在线预览：

codesandbox 地址

代码：