Darwin-flex-layout NPM

darwin-flex-layout

darwin-flex-layout是一套从多个完整成熟的大型项目总结出来的页面布局最佳实践方案，开箱即用。

基于flex实现了纯className即可简单快速搭建基础页面结构，降低了重复编写布局代码的时间，提高了开发效率。

除了提供flex布局方案，还有一些比较常见的工具类，例如设备平台的判断，样式重置，屏幕尺寸适配，以及精简的前端路由控制器等，特别适合应用在活动页面里面

文档地址:https://rockey2020.github.io/darwin-flex-layout/

安装方式

使用 npm:

$ npm install darwin-flex-layout -S

使用 yarn:

$ yarn add darwin-flex-layout

使用 pnpm:

$ pnpm add darwin-flex-layout

使用 jsDelivr CDN:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/darwin-flex-layout/dist/legacy/all/index.css">
<script src="https://cdn.jsdelivr.net/npm/darwin-flex-layout/dist/legacy/all/index.js"></script>

使用例子(基于npm安装)

import Da from "darwin-flex-layout/dist/default/all" //推荐 默认导入样式  可通过Da调用附属工具类 同时默认在window挂载附属的工具类
import "darwin-flex-layout/dist/default/all"//默认在window挂载附属的工具类 默认导入样式
//又或者 导入自己想要的css或者js default下的任意目录都是独立的模块 可以按需导入

使用例子(基于浏览器引入方式安装)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/darwin-flex-layout/dist/legacy/all/index.css">
<script src="https://cdn.jsdelivr.net/npm/darwin-flex-layout/dist/legacy/all/index.js"></script>
<!--会在window对象上挂载一个Da对象,可通过Da调用对应的工具类-->
<!--与npm安装方式一样，支持单独模块的注册引用,只需要修改对应的引用文件地址-->

DaFlex基本类名规则

所有的flex布局类名前缀都会有 da-flex

任何的包含 da-flex 的元素都默认是垂直左对齐

类名完全遵守flex属性命名规则例如 da-flex da-flex-inline da-flex-justify-center

只有任意父级元素className包含了 da-flex 子级的附属类名才会生效例如父级有da-flex 子级使用da-flex-justify-center会生效否则无效

da-flex-item 基于百分比宽度实现了从0-100的宽度类名例如 da-flex-item-50 就是宽度为50%

声明一个占满一行的div 内部包含两个垂直居中的盒子 且该行会自动换行
<div class="da-flex da-flex-wrap">
    <div class="da-flex da-flex-inline da-flex-item-50 da-flex-justify-center">
        <span>盒子1</span>
    </div>
    <div class="da-flex da-flex-inline da-flex-item-50 da-flex-justify-center">
        <span>盒子2</span>
    </div>
</div>

声明一个占满一行的div 内部包含两个垂直居中的盒子 且该div是一个列表模式
<div class="da-flex da-flex-column">
    <div class="da-flex da-flex-inline da-flex-item-100 da-flex-justify-center">
        <span>盒子1</span>
    </div>
    <div class="da-flex da-flex-inline da-flex-item-100 da-flex-justify-center">
        <span>盒子2</span>
    </div>
</div>