Flexbox 是 CSS3 中的弹性盒子布局模型，它可以帮助开发者更轻松地实现复杂的布局效果，适应不同设备的屏幕尺寸。在前端开发中，Flexbox 已成为不可或缺的一部分，所以每个前端开发者都应该深入了解和掌握其实用方法。本文旨在总结一些常用的 Flexbox 实用方法，旨在帮助读者更好的掌握和应用 CSS Flexbox。
基本概念和术语
在学习 Flexbox 之前，首先需要了解一些基本概念和术语：
Flex 容器 (Flex container)：设置 display 属性为 flex 或 inline-flex 的元素即为 Flexbox 容器。
Flex 项目 (Flex item)：容器内的元素称之为 Flex 项目。
主轴 (Main axis)：容器的主轴方向。
交叉轴 (Cross axis)：容器的垂直于主轴的方向。
Flex 方向 (Flex direction)：控制 Flex 容器内 Flex 项目布局的排列方向，可设置为 row、row-reverse、column 和 column-reverse。
Justify-content：设置 Flex 项目沿主轴方向的对齐方式。
Align-items：设置 Flex 项目沿交叉轴方向的对齐方式。
Flex-wrap：设置 Flex 项目是否换行。
Flex-grow：设置 Flex 项目在空间有剩余时的扩展比例。
Flex-shrink：设置 Flex 项目在空间不足时的收缩比例。
Flex-basis：设置 Flex 项目在按比例分配空间之前的基础大小。
实用方法总结
1. 垂直居中
垂直居中是 Web 开发中经常遇到的问题，CSS 以前的解决方法通常是使用绝对定位或表格布局。但是，使用 Flexbox 可以更方便地实现垂直居中。
-- -------------------- ---- -------
-------
------- -
-------- -----
------------ ------- -- ------
------- ------
-
------ -
----------------- ----
------ ------
------- -----
-
--------
---- ---------------
---- --------------------
------在上面的代码中，使用了 align-items 属性设置 Flexbox 的垂直居中方式。
2. 多行文本溢出省略号
在需要展示过长的文本时，我们通常需要用到省略号来表示一部分内容被省略了。在 Flexbox 中，还可以限制文本到多行，并自动展示省略号。
-- -------------------- ---- -------
-------
------- -
-------- -----
------------ -------
------- ------
-
------ -
--------- ------- -- --------
-------------- --------- -- ---
-------- ------------- -- ------------------
----------------------- -------
--------------- -------
-------------------- -----------
------------ -----------
------------ ----- -- --
------------------- --------- -- -------
------------------- --
-
--------
---- ---------------
---- -----------------------------------------------
------上面的代码中，使用了 text-overflow 和 line-clamp 属性来控制多行文本省略号。
3. 等分布局
在需要对一组等宽的元素进行排版时，可以使用 Flexbox 进行等分布局。
-- -------------------- ---- -------
-------
------- -
-------- -----
---------------- -------------- -- ----
------- ------
-
------ -
----------------- ----
------ ------
------- -----
-
--------
---- ---------------
---- --------------------
---- --------------------
---- --------------------
------使用了 justify-content 属性设置 Flexbox 的等分布局方式，使用 space-between 值将元素间间隔等分。
4. 顺序控制布局
在 Flexbox 中，可以通过 order 属性来控制 Flex 项目的布局顺序。
-- -------------------- ---- -------
-------
------- -
-------- -----
------- ------
-
------ -
----------------- ----
------ ------
------- -----
-
------------- -
------ --- -- -----------
-
--------
---- ---------------
---- --------------------
---- ------------ --------------------
---- --------------------
------在上面的代码中，使用了 order 属性控制第二个元素的排列位置。
5. Flexbox 的导航菜单
使用 Flexbox 可以轻松地实现导航菜单的布局。
-- -------------------- ---- -------
-------
---- -
-------- -----
---------------- -------
------------ -------
------- -----
------ -----
----------------- -----
------ -----
-------- - -----
-
--------- -
------------- -----
-
--------
---- ------------
---- --------------------------
---- --------------------------
---- --------------------------
------使用了 justify-content 和 align-items 属性，分别实现了主轴居中和垂直居中，使用 margin-right 属性实现了元素间距。
6. Flexbox 的图片展示
使用 Flexbox 可以轻松地实现图片展示的布局。
-- -------------------- ---- -------
-------
--------- -
-------- -----
---------------- --------------
------------ -------
------- ------
------ -----
-------- -----
----------------- -----
-
--------- -
------ ------
------- ------
----------------- -----
-
--------
---- -----------------
---- -----------------------
---- -----------------------
---- -----------------------
------使用了 justify-content 和 align-items 属性，分别实现了等分布局和垂直居中。
总结
本文总结了 CSS Flexbox 的一些常用的实用方法，希望对前端工程师有所帮助。通过学习和实践，相信大家一定能够更好地掌握和应用 Flexbox。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6454f009968c7c53b08a48b1