概述
flex-util 是一个用于辅助实现弹性盒子布局（Flexbox）的 JavaScript 工具库，可用于在前端开发中快速实现各种布局方案。
安装
flex-util 可以通过 npm 包管理器进行安装，安装命令如下：
npm install flex-util
使用
使用 flex-util 可以直接在 HTML 中使用，也可以通过 JavaScript 进行操作。下面分别介绍这两种方式的使用方法。
HTML 中使用
在 HTML 中，可以通过给容器元素设置不同的 class，来实现不同的布局效果。例如：
-- -------------------- ---- ------- ---- -------- --- ---- ---------------------- ------------------- ------ ---- -------- --- ---- ---------------------- ------------------- ------
除此之外，flex-util 还提供了其它常用的布局类，具体使用方法可以参考该库的GitHub 页面。
JavaScript 中使用
在 JavaScript 中，可以使用 flex-util 的 API 方法来实现各种复杂的布局。例如：
import { flexbox } from 'flex-util';
const container = document.querySelector('.container');
// 将 .container 设置为 Flex 容器，并水平居中
flexbox(container).display('flex').justifyContent('center');示例代码
下面给出一个完整的示例，演示如何使用 flex-util 实现一个头像和名字水平居中、名字在头像下方的效果。
<div class="flex-container"> <img src="https://avatar.example.com/avatar.png" class="avatar"> <div class="name">王小明</div> </div>
-- -------------------- ---- ------- --------------- - -------- ----- --------------- ------- ------------ ------- - ------- - ------ ------ ------- ------ -------------- ---- - ----- - ----------- ----- ---------- ----- -
-- -------------------- ---- ------- ------ - ------- - ---- ------------ ----- --------- - ------------------------------------------ ----- ------ - ---------------------------------- ----- ---- - -------------------------------- -- - --------------- --- ---- -------- --------------------------------------------------------------------------------- -- - ------- --- ---- -------- ----------------------- - ------- -- - ----- --- ---- ------------- --------------------- - -------
通过运行上面的代码，即可得到一个头像和名字水平居中、名字在头像下方的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005728281e8991b448e8b45