tin-flex💫 基于flex的极简框架
概述
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>
2.百分比更改单个列的大小
如果你想自行安排部件 tin-item 的大小,可以通过 tin-item-10 ,tin-item-20 ,tin-item-30 ,tin-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>
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体验贡献力量