1. 什么是 Flexbox？
CSS Flexbox（Flexible Box Layout Module）布局模块是一种用于在容器中对齐和分配空间的新方法。Flexbox 是一个一维布局模型，允许我们在水平或垂直方向上对元素进行布局，并处理其内部元素之间的空间分配。
CSS Flexbox 通过为容器和其内部元素提供一组新的属性来实现。这些属性可用于控制如何在容器内排列、分配和对齐元素。
2. 实现水平垂直居中
许多设计中需要将元素居中对齐。在 CSS 早期版本中，实现这一目标通常需要使用复杂的技巧和 trick。而使用 Flexbox，实现水平垂直居中非常简单。
2.1 实现垂直居中
首先，让我们看一下如何在 Flexbox 中实现垂直居中。我们需要将所有子元素设置为 Flexbox，然后使用 align-items 属性将它们垂直居中。
.container {
display: flex;
align-items: center; /* 将子元素垂直居中 */
}.align-items 属性有五个可用的值：
- flex-start：默认值，从容器的开头开始对齐
- flex-end：从容器的结尾开始对齐
- center：在容器中垂直居中
- baseline：根据基线对齐
- stretch：如果元素未设置高度或高度为 auto，则拉伸元素以填充容器
2.2 实现水平居中
现在，我们已经将子元素垂直居中了，接下来让我们看一下如何实现水平居中。我们可以使用 justify-content 属性将它们水平居中，同时可以使用 align-items 属性继续保持垂直居中。
.container {
display: flex;
align-items: center; /* 将子元素垂直居中 */
justify-content: center; /* 将子元素水平居中 */
}justify-content 属性有五个可用的值：
- flex-start：默认值，从容器的开头开始对齐
- flex-end：从容器的结尾开始对齐
- center：在容器中水平居中
- space-between：在子元素之间平均分配空间
- space-around：在子元素周围平均分配空间
2.3 实现水平垂直居中
最后，让我们介绍如何将元素水平垂直居中。我们可以使用 align-items 和 justify-content 属性将所有元素居中对齐。
.container {
display: flex;
align-items: center; /* 将子元素垂直居中 */
justify-content: center; /* 将子元素水平居中 */
}3. 实现多行文本省略
有时候，当文本过长时，我们需要将其截断并显示省略号。使用 CSS Flexbox，我们可以实现多行文本的截断和省略。
3.1 实现单行文本省略
首先，我们来看一下如何将单行文本截断并显示省略号。我们需要使用 white-space 和 text-overflow 属性来实现。
<div class="single-line-text">这是一行很长的文本，我们需要将其截断并显示省略号。</div>
.single-line-text {
white-space: nowrap; /* 设置文本不能换行 */
overflow: hidden; /* 隐藏溢出内容 */
text-overflow: ellipsis; /* 显示省略号 */
}3.2 实现多行文本省略
现在，我们来看一下如何将多行文本截断并显示省略号。我们需要使用 -webkit-line-clamp 和 -webkit-box-orient 属性来实现。
<div class="multi-line-text">这是多行很长的文本，我们需要将其截断并显示省略号。这是多行很长的文本，我们需要将其截断并显示省略号。这是多行很长的文本，我们需要将其截断并显示省略号。</div>
.multi-line-text {
display: -webkit-box; /* 把元素变成块级元素 */
-webkit-line-clamp: 3; /* 最多显示三行 */
-webkit-box-orient: vertical; /* 把 block-axis 翻转为垂直方向 */
overflow: hidden; /* 隐藏溢出内容 */
}注意：-webkit-line-clamp 属性只在 WebKit 内核的浏览器中生效，如 Chrome 和 Safari。
4. 总结
CSS Flexbox 提供了一种简单的方法来实现水平垂直居中和多行文本省略。通过灵活使用 align-items、justify-content、white-space、text-overflow、-webkit-line-clamp 和 -webkit-box-orient 属性，可以灵活地控制布局和文本。这些技术非常有用，也进一步提高了 Web 开发的效率和灵活性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64715e09968c7c53b0f3e7ea