Flex布局的两个小技巧

发表于 | 分类于

flex 布局用起来很爽，但不知道你们有没有遇到以下两个问题呢？

超出省略号

在使用 flex 布局的时候，有时候我们并不想让文字换行，想以省略号的形式表示,这个时候布局就错乱了，如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
// ...
<style>
	* {
		margin: 0;
		padding: 0;
	}

	.wrapper {
		display: flex;
		overflow: hidden;
	}

	.img {
		width: 180px;
		margin: 10px;
		height: 86px;
	}

	.desc {
		flex: 1;
	}

	p {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>
<div class="wrapper">
	<div class="img">
		<img
			alt=""
			style="width: 100%"
			src="https://www.baidu.com/img/bd_logo1.png"
		/>
	</div>
	<div class="desc">
		<h4 style="line-height: 40px;">百度</h4>
		<h6 style="line-height: 30px;">百度一下，你就知道</h6>
		<p>
			百度（纳斯达克：BIDU），全球最大的中文搜索引擎、最大的中文网站。1999年底,身在美国硅谷的李彦宏看到了中国互联网及中文搜索引擎服务的巨大发展潜力，抱着技术改变世界的梦想，他毅然辞掉硅谷的高薪工作，携搜索引擎专利技术，于
			2000年1月1日在中关村创建了百度公司。
		</p>
	</div>
</div>
// ...

结果却是这样：
201808291022.png

图片不见了！！！且文字也没有换行。经过测试发现，在.desc上添加 width: 0;或者overflow: hidden;都是可行的。

找了一些资料，出现这个问题的原因是：flex 设置的是多余的空间如何分配的问题。所以你设置了元素 1：1，比如说 宽度 1000，一个元素占 40，一个占 60，也就是剩下的 900 按 1：1 分配给这两个元素。所以你这两个 div 本来因为文字不同占用的宽度不一样，那么最后得到的宽度肯定也不一样了。所以可以给他们设置个 width:0 这样。

PS：之前遇到过这个问题，现在回过头来写博客却不能重现了，原因是现在写这些东西都比较注意了，我还以为是 flex 的 bug 修复了。

换行左对齐

flex 中使用得比较多的还有一个内容两端对其。但是当你内容最后一行数量与上面的数量不相等时，你就会发现最后一行无法实现左对齐，而是两端对齐，网上随便找了个图：
201808291022.png

网上找了很多资料，有以下 2 种方法

  1. 添加几个空元素（适用于大多数场景）

    根据排列布局添加空元素，比如每行最多为 n 个，那么在最后添加 n 个空元素即可,如：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    <style>
    	.box {
    		display: flex;
    		justify-content: space-between;
    		flex-wrap: wrap;
    	}

    	.item {
    		width: 32%;
    		background-color: #00abff;
    		height: 60px;
    		margin-top: 10px;
    	}

    	.itemempty {
    		height: 0px;
    		width: 32%;
    	}
    </style>
    <div class="box">
    	<div class="item"></div>
    	<div class="item"></div>
    	<div class="item"></div>
    	<div class="item"></div>
    	<div class="item"></div>
    	<div class="item"></div>
    	<div class="item"></div>
    	<div class="item"></div>
    	<div class="itemempty"></div>
    	<div class="itemempty"></div>
    	<div class="itemempty"></div>
    </div>

  2. 使用 after（适用于每行列数确定的场景）

    1
    2
    3
    4
    .box:after {
    	content: "";
    	flex: auto;
    }

[越努力，越幸运！]