日常开发中，设计师总会提出各种奇思妙想的需求，为我们的UI还原工作带来很多挑战。
虽然有时确实会让我们花蛮多时间去实现，但从一方面想这也是个机会，让我们更深入了解的浏览器布局方式。
本文主要记录之前工作中遇到的特殊布局，都是通过CSS方式去实现。
多条件留白布局
图中有两个内容块A和B，他们宽度取决于内容宽度，左右侧留白有max- 200px限制，中间留白有min- 150px限制。
如果父级宽度缩小，中间留白一直保持着150px宽度，左右侧留白宽度跟随父级宽度缩小。
如下图所示：
从需求的描述来看，需要的是同时支持弹性(宽度随父级宽度而改变)和限制条件(max-width、min-width)的属性。
一提起弹性，自然而然的就想到flex布局，只要加入占位的元素，可使用before或after伪类或手动插入元素，然后加上flex: 1和限制条件即可。
在线预览：
codesandbox 地址:https://codesandbox.io/s/thirsty-dijkstra-gp5up
代码：
<style>.container { display: flex;}
// 左右侧留白.left,.right { flex: 1;max- 200px;}
// 中间留白.center { flex: 1;min- 150px;}</style>
<div class="container"><div class="left"></div><div>Content A</div><div class="center"></div><div>Content B</div><div class="right"></div></div>
中间文本截断
需求：对于文件名，在页面中一定要显示文件扩展名，非扩展名部分溢出时显示省略号。
短文件名：
长文件名：
首先需要使用JS对文件名进行裁剪，拆分出两部分：非扩展名部分和扩展名部分，放置在两个相邻的元素中。
当文件名宽度 <= 父级宽度时，左侧元素和右侧元素宽度为各自内部文字宽度。
当文件名宽度 > 父级宽度时，左侧元素宽度取决于内容，达到最大值后文本截断显示缩略号，右侧元素随左侧元素向右移，一直保持自身宽度不缩放。
对于这样的问题，很自然的就想到flex-shrink。flex-shrink用来设置当父元素的宽度小于所有子元素的宽度的和时（即子元素会超出父元素），子元素如何缩小自己的宽度。
在线预览：
codesandbox 地址:https://codesandbox.io/s/little-sound-ffc5o
代码：
<style>.container {display: flex;}
.left {flex-shrink: 1;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.right {white-space: nowrap;}</style>
<div class="row"> <span class="left">超长的文件名超长的文件名超长的文件名超长的文件名</span> <span class="right">.jpeg</span></div>
这个方法有个瑕疵，就是缩略符与右侧字符存在一定空隙，不过字体小的时候不太明显。
使用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呢？
一样的效果，看来flex对于此类布局还是略逊一筹，这时就需要用到很多人平时不太注意的属性wirte-mode了。
wirte-mode属性定义了文本水平或垂直排布以及在块级元素中文本的行进方向。
MDN文档：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/writing-mode
效果：
在线预览：
codesandbox 地址:https://codesandbox.io/s/elegant-hill-3rm09
代码：
<style>.list {display: inline-block;height: 200px;font-size: 0;writing-mode: vertical-lr;}
.item {display: inline-block;margin: 5px 5px; 150px;height: 40px;line-height: 40px;border-radius: 4px;font-size: 14px;text-align: center;color: #fff;background: #00a0e9;list-style: none;writing-mode: horizontal-tb;}
.item:nth-child(2),.item:nth-child(10) {height: 90px;line-height: 90px;}</style>
<ul class="list"> <li class="item">1</li> <li class="item">2</li> <li class="item">3</li> <li class="item">4</li> <li class="item">5</li> <li class="item">6</li> <li class="item">7</li> <li class="item">8</li> <li class="item">9</li> <li class="item">10</li> <li class="item">11</li> <li class="item">12</li></ul>
作者：BrownBear
https://juejin.im/post/5d23380cf265da1b971a9899
▼
原创系列推荐
▼
5. Webpack4 入门（上）|| Webpack4 入门（下）
6. MobX 入门（上） || MobX 入门（下）
7. 59篇原创系列汇总
回复“加群”与大佬们一起交流学习~
点这，与大家一起分享本文吧~