这是 CSS 进阶指南系列文章，本文主要介绍了 CSS 中容易被忽略的细节，通过阅读本文，你将学习 flex-wrap、处理长文本、避免错误的固定尺寸等内容。

flex wrap

Flex 作为目前最常用的 CSS 布局功能之一，设置 display: flex 包装容器的子元素，让内容彼此相邻排序是很实用的。但它存在一个问题，当容器没有足够的空间时，默认情况下这些子元素不会换行。我们需要设置 flex-wrap: wrap 来改变这种行为。下面是一个典型的例子，我们有四个元素彼此相邻。 但是当容器的内容过多时，它会溢出到容器外部。 为了解决这个问题，我们可以给容器设置溢出水平滚动。但这可能并不是所有场景都想要的。我们还有另外一种解决问题的方案，那就是设置 flex-wrap: wrap 来让子元素换行。

处理长文本内容

这是一个商品列表，看上去很正常。 但是当某一个商品的名字过长时，它会把元素撑大。 在这类布局中，每个元素的样式一致性非常重要。所以处理它的方式就是将长文本溢出部分给换成省略号隐藏起来。将 white-space 设置为 nowrap，让文本不换行。将 overflow 设置为 hidden，让溢出的部分隐藏掉。将 text-overflow 设置为 ellipsis，让溢出的文字变成省略号。

固定尺寸

使用固定高度或者固定宽度是最常见的破坏布局的原因。

固定高度

有时我们会将某个元素的高度固定，但是内容大于高度，就会破坏布局。

为了避免内容从容器中泄漏出来，我们可以选择使用 min-height 而不是 height。这样的话，即使内容很多，也不会破坏布局。

固定宽度

标签是我们常见的组件之一，有时候我们会给标签固定宽度。但如果标签中的文字过长，也会导致文字漏出。

设置 min-width 就可以避免这个问题。

如果你对 CSS 的内容感兴趣，欢迎关注我的新专栏 CSS 进阶指南，让我们一起成长。