简介
flexible-layout 是一个基于 flex 布局和 less 的前端布局解决方案，它提供了一些常用布局组件和 mixin，支持响应式布局，适用于移动端和桌面端页面开发。
安装
在项目根目录下运行以下命令安装 flexible-layout：
npm install flexible-layout --save
使用
导入样式
在项目中的入口文件中导入 flexible-layout 的样式：
@import "node_modules/flexible-layout/src/index.less";
响应式设定
flexible-layout 通过 less 的 mixin 实现响应式设定，支持以下设备尺寸：
- 手机：
< 768px - 平板：
>= 768px - 桌面：
>= 992px - 大屏幕：
>= 1200px
使用方式：
-- -------------------- ---- -------
-- --
---- -
---------- -
-- --
-
-
-- -----
---- -
---------- -
-- --
-
-
-- ---
---- -
---------- -
-- --
-
-布局组件
flexible-layout 提供了一些常用布局组件，包括：
Container
Container 组件用于包裹页面的内容，它有两种模式：fixed 和 fluid。
使用方式：
<div class="container container-fixed"> fixed </div> <div class="container container-fluid"> fluid </div>
Row 和 Col
Row 和 Col 组件用于实现栅格布局，Col 组件必须嵌套在 Row 组件中，且 Col 组件的数量不得超过 12，否则会影响布局。
使用方式：
<div class="row"> <div class="col-md-6"> col-md-6 </div> <div class="col-md-6"> col-md-6 </div> </div>
Tab
Tab 组件用于实现选项卡布局。
使用方式：
-- -------------------- ---- -------
---- ------------
--- ----------------
------ ----------------- ----------
------ ----------------- ----------
------ ----------------- ----------
-----
---- --------------------
---- ---------- -------------------- - -------------
---- ---------- -------------------- - -------------
---- ---------- -------------------- - -------------
------
------Modal
Modal 组件用于实现弹窗布局。
使用方式：
-- -------------------- ---- -------
---- ------------ ----- ------------ ------------- ------------- -------------------
---- ---------------------
---- ----------------------
---- ---------------------
------- ------------- ------------- -------------------- -----------------------------------
--- ------------------------- ----------
------
---- -------------------
----- -------
------
---- ---------------------
------- ------------- ---------- ------------ -----------------------------------
------- ------------- ---------- ----------------- ----------------
------
------
------
------常用 mixin
flexible-layout 提供了一些常用 mixin，可以简化开发流程。
@response()
@response() mixin 可以在不同的屏幕尺寸下设置不同的样式。
使用方式：
-- -------------------- ---- -------
---- -
---------- -----
----------- -
---------- -
---------- -----
-
---------- -
---------- -----
-
-
-@ellipsis()
@ellipsis() mixin 可以在文本溢出时显示省略号。
使用方式：
.foo {
@ellipsis;
}@media-custom()
@media-custom() mixin 可以用于自定义媒体查询。
使用方式：
@media-custom(@min-width: 960px) {
.foo {
// 样式
}
}示例代码
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---------------------- ----------
----- ---------------- --------------------------------------------------
-------
------
---- ---------------- -----------------
---- ------------
---- -----------------
------------------- ---------
--------- --------------- ----------
------
---- -----------------
---- ------------ ---------------
---- ---------------------------------
---- ------------------------ -------------
------
------
------
---- ------------
---- -----------------
---- ------------
--- ----------------
------ ----------------- ----------
------ ----------------- ----------
-----
---- --------------------
---- ---------- -------------------- - -------------
---- ---------- -------------------- - -------------
------
------
------
---- -----------------
------- ---------- ------------ ------------------- --------------------------- --------------
------
------
------
---- ------------ ----- ------------ ------------- ------------- -------------------
---- ---------------------
---- ----------------------
---- ---------------------
------- ------------- ------------- -------------------- -----------------------------------
--- ------------------------- ----------
------
---- -------------------
----- -------
------
---- ---------------------
------- ------------- ---------- ------------ -----------------------------------
------- ------------- ---------- ----------------- ----------------
------
------
------
------
------- ------------------------------------------------------
------- ---------------------------------------------------------------
-------
-------结语
使用 flexible-layout 可以简化前端布局开发，提高开发效率。如果你有更好的建议或想法，可以在 GitHub 上提交 issue 或 pull request。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067376890c4f72775840d6