【布局】493- 工作中遇到的特殊CSS布局
日常开发中，设计师总会提出各种奇思妙想的需求，为我们的UI还原工作带来很多挑战。
虽然有时确实会让我们花蛮多时间去实现，但从一方面想这也是个机会，让我们更深入了解的浏览器布局方式。
本文主要记录之前工作中遇到的特殊布局，都是通过CSS方式去实现。
多条件留白布局
图中有两个内容块A和B，他们宽度取决于内容宽度，左右侧留白有max-width: 200px限制，中间留白有min-width: 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-width: 200px;
}
// 中间留白
.center {
flex: 1;
min-width: 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;
width: 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