本文将介绍如何使用 npm 包 rc-align，让你轻松实现 DOM 元素对齐的功能。rc-align 是基于 React 的一个对齐工具，它可以帮助我们在页面中实现元素的对齐操作。
安装
要安装 rc-align，我们需要在命令行中输入以下命令：
npm install rc-align --save
基本用法
Align 组件
rc-align 的核心组件是 Align，它需要两个参数：target 和 source。其中，target 是目标元素，source 是参照元素。Align 会将 target 对齐到 source 上。
下面是一个简单的例子，展示如何使用 Align：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ ----- ---- -----------
----- --- - -- -- -
----- --------- - -------------------
----- --------- - -------------------
------ -
-----
---- ----------------------------
------ -------------------------- ---------------------------
---- ----------------------------
--------
------
--
--
-------------------- --- ---------------------------------在这个例子中，我们定义了一个包含两个 div 元素的容器。第一个 div 元素是参照元素，第二个 div 元素是目标元素。我们将这两个元素的 ref 分别传递给 source 和 target 参数，然后将它们包裹在 Align 组件中。最终，目标元素会被对齐到参照元素上。
对齐方式
Align 组件支持多种对齐方式，比如左对齐、右对齐、上对齐、下对齐等。我们可以通过设置 align 属性来指定对齐方式。align 属性是一个字符串，它由两个部分组成，用空格隔开。第一个部分表示水平对齐方式，第二个部分表示垂直对齐方式。
下面是一个例子，展示如何使用 align 属性：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ ----- ---- -----------
----- --- - -- -- -
----- --------- - -------------------
----- --------- - -------------------
------ -
-----
---- ----------------------------
------ -------------------------- -------------------------- --------- ----
---- ----------------------------
--------
------
--
--
-------------------- --- ---------------------------------在这个例子中，我们将 align 属性设置为 "tr br"，表示目标元素的右上角要对齐到参照元素的右下角。你可以试着修改 align 属性的值，看看元素对齐的效果有何不同。
对齐偏移量
有时候我们需要对元素的位置进行微调，这时可以通过设置 offset 属性来实现。offset 是一个数组，它包含两个数值，分别表示水平和垂直方向上的偏移量。
下面是一个例子，展示如何使用 offset 属性：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ ----- ---- -----------
----- --- - -- -- -
----- --------- - -------------------
----- --------- - -------------------
------ -
-----
---- ----------------------------
------ -------------------------- -------------------------- --------- --- ------------ -----
---- ----------------------------
--------
------
--
--
-------------------- --- ---------------------------------
--
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------