1. 什么是 Flexbox？
CSS Flexbox（Flexible Box Layout Module）布局模块是一种用于在容器中对齐和分配空间的新方法。Flexbox 是一个一维布局模型，允许我们在水平或垂直方向上对元素进行布局，并处理其内部元素之间的空间分配。
CSS Flexbox 通过为容器和其内部元素提供一组新的属性来实现。这些属性可用于控制如何在容器内排列、分配和对齐元素。
2. 实现水平垂直居中
许多设计中需要将元素居中对齐。在 CSS 早期版本中，实现这一目标通常需要使用复杂的技巧和 trick。而使用 Flexbox，实现水平垂直居中非常简单。
2.1 实现垂直居中
首先，让我们看一下如何在 Flexbox 中实现垂直居中。我们需要将所有子元素设置为 Flexbox，然后使用 align-items 属性将它们垂直居中。
---------- - -------- ----- ------------ ------- -- -------- -- -
.align-items 属性有五个可用的值：
- flex-start：默认值，从容器的开头开始对齐
- flex-end：从容器的结尾开始对齐
- center：在容器中垂直居中
- baseline：根据基线对齐
- stretch：如果元素未设置高度或高度为 auto，则拉伸元素以填充容器
2.2 实现水平居中
现在，我们已经将子元素垂直居中了，接下来让我们看一下如何实现水平居中。我们可以使用 justify-content 属性将它们水平居中，同时可以使用 align-items 属性继续保持垂直居中。
---------- - -------- ----- ------------ ------- -- -------- -- ---------------- ------- -- -------- -- -
justify-content 属性有五个可用的值：
- flex-start：默认值，从容器的开头开始对齐
- flex-end：从容器的结尾开始对齐
- center：在容器中水平居中
- space-between：在子元素之间平均分配空间
- space-around：在子元素周围平均分配空间
2.3 实现水平垂直居中
最后，让我们介绍如何将元素水平垂直居中。我们可以使用 align-items 和 justify-content 属性将所有元素居中对齐。
---------- - -------- ----- ------------ ------- -- -------- -- ---------------- ------- -- -------- -- -
3. 实现多行文本省略
有时候，当文本过长时，我们需要将其截断并显示省略号。使用 CSS Flexbox，我们可以实现多行文本的截断和省略。
3.1 实现单行文本省略
首先，我们来看一下如何将单行文本截断并显示省略号。我们需要使用 white-space 和 text-overflow 属性来实现。
---- --------------------------------------------------------
----------------- - ------------ ------- -- -------- -- --------- ------- -- ------ -- -------------- --------- -- ----- -- -
3.2 实现多行文本省略
现在，我们来看一下如何将多行文本截断并显示省略号。我们需要使用 -webkit-line-clamp 和 -webkit-box-orient 属性来实现。
---- ---------------------------------------------------------------------------------------------------------
---------------- - -------- ------------ -- --------- -- ------------------- -- -- ------ -- ------------------- --------- -- - ---------- ------- -- --------- ------- -- ------ -- -
注意：-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