tin-flex

2.1.0 • Public • Published

tin-flex💫 基于flex的极简框架

Build Status npm version Gitter

概述

tin-flex 是基于flex布局的极简CSS3框架,你可以用小巧的它搭建几乎任何的移动端布局

但是注意,tin-flex只注重于布局的样式,并不包含任何其他的样式修饰。

文档

1.构建基本的flex布局

你可以通过 tin-flex 搭建一个flex容器,通过 tin-item 来搭建容器中的部件

这里请注意一下有 tin-item-auto 和 没有 tin-item-auto 的区别。它非常重要,默认tin-item部件是平均分布大小的。加了tin-item-auto类后,将自动根据部件内容缩放。

<div class="tin-flex">
    <div class="tin-item i1 tin-item-center">i1</div>
    <div class="tin-item i2 tin-item-right">i2</div>
    <div class="tin-item tin-item-auto i3">i3</div>
    <div class="tin-item tin-item-auto i4">i4</div>
</div>

构建基本的flex布局

2.百分比更改单个列的大小

如果你想自行安排部件 tin-item 的大小,可以通过 tin-item-10tin-item-20tin-item-30tin-item-40 等来安排部件的大小 。最后的数字,表示部件占据容器的百分比。

<div class="tin-flex">
    <div class="tin-item tin-item-10 i1">i1</div>
    <div class="tin-item tin-item-20 i2">i2</div>
    <div class="tin-item tin-item-10 i3">i3</div>
    <div class="tin-item tin-item-60 i4">i4</div>
</div>

百分比更改单个列的大小

3.flex布局中的列偏移

tin-item-first,tin-item-last,可以用来前置或者后置容器中的部件。tin-item-offset-50 ,用来决定部件的偏移量,具体的百分比你自己决定。

<div class="ins">
    列偏移示例1
</div>
<div class="tin-flex">
    <div class="tin-item tin-item-10 i1">i1</div>
    <div class="tin-item tin-item-30 i2">i2</div>
    <div class="tin-item tin-item-10 i3">i3</div>
    <div class="tin-item tin-item-50 tin-item-first i4">i4</div>
</div>
<div class="ins">
    列偏移示例2
</div>
<div class="tin-flex">
    <div class="tin-item tin-item-10 i3 tin-item-offset-50">i3</div>
</div>

flex布局中的列偏移

4.自动列

如果你不确定百分比的情况下,你可以直接用 tin-item 和 tin-item-auto 来自动根据部件内容分布flex布局

<div class="tin-flex">
    <div class="tin-item i1 tin-item-auto">i1++++</div>
    <div class="tin-item i2 tin-item-auto">i2+</div>
    <div class="tin-item i3 tin-item-auto">i3</div>
    <div class="tin-item i4 tin-item-auto">i4++++++++</div>
    <div class="tin-item i2 tin-item-auto">i5</div>
    <div class="tin-item i3 tin-item-auto">i6</div>
</div>

自动列

5.自动换行

默认情况下,容器中的flex是不换行的,你可以加上 tin-flex-wrap 让它自动换行

<div class="ins">
    自动换行
</div>
<div class="tin-flex tin-flex-wrap">
    <div class="tin-item tin-item-10 i1">i1</div>
    <div class="tin-item tin-item-20 i2">i2</div>
    <div class="tin-item tin-item-10 i3">i3</div>
    <div class="tin-item tin-item-60 i4">i4</div>
    <div class="tin-item tin-item-50 i4">i4</div>
    <div class="tin-item tin-item-20 i2">i2</div>
</div>

自动换行

6.定义个别项目的对齐方式

默认情况下,我们是让容器中部件上下居中的,你可以更改它的对齐方式。使用它的方式非常简单,你只需要记住 right top bottom left 即可。

<div class="tin-flex">
    <div class="tin-item tin-item-20 tin-item-right i1">i1</div>
    <div class="tin-item tin-item-20 tin-item-top i2">i2</div>
    <div class="tin-item tin-item-20 tin-item-bottom i3">i3</div>
    <div class="tin-item tin-item-20 i4">i4</div>
</div>

定义个别项目的对齐方式

8.流式布局

如果你偶尔想用到流式布局,那也可以,tin-flex引入了类似bootstrap的栅格系统,你可以灵活使用。我们支持并且鼓励使用更多灵活的技术而不仅仅局限于使用flex。

<div class="container">
    <div class="row">
        <div class="col-1 i1" style="height:100px"></div>
        <div class="col-1 i2" style="height:100px"></div>
        <div class="col-1 i3" style="height:100px"></div>
        <div class="col-1 i4" style="height:100px"></div>
        <div class="col-1 i1" style="height:100px"></div>
        <div class="col-1 i2" style="height:100px"></div>
        <div class="col-1 i3" style="height:100px"></div>
        <div class="col-1 i4" style="height:100px"></div>
        <div class="col-1 i1" style="height:100px"></div>
        <div class="col-1 i2" style="height:100px"></div>
        <div class="col-1 i3" style="height:100px"></div>
        <div class="col-1 i4" style="height:100px"></div>
    </div>
</div>

流式布局

扩展

License

The MIT License(http://opensource.org/licenses/MIT)

贡献

如果你有好的意见或建议,欢迎给我们提issue或pull request,为提升tin-flex体验贡献力量

Readme

Keywords

Package Sidebar

Install

npm i tin-flex

Weekly Downloads

0

Version

2.1.0

License

MIT

Last publish

Collaborators

  • zx1988826