# flexy
**Repository Path**: panda_rrr/flexy
## Basic Information
- **Project Name**: flexy
- **Description**: 基于flex的快速布局样式库
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2018-04-19
- **Last Updated**: 2020-12-19
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# flexy
flexy是一个基于flex布局的样式库，其目的是在html中进行快速布局。
## 使用方法
在需要布局的容器中加入class="flex"即可。通过x-和y-系列class可以改变对齐方式，通过data-gap属性可以设定每个子元素之间的间隔。
* x-left: 左对齐
* x-center: 水平居中
* x-right: 右对齐
* y-top: 垂直靠上
* y-center: 垂直居中
* y-bottom: 垂直考下
* no-flex: 禁止伸缩
* no-grow: 禁止放大
* no-shrink: 禁止缩小
1. **横向布局**
> flexy默认的就是横向布局，当一个容器的class中加入了flex后，它的直接子元素就会在水平方向上排列，默认是水平方向两端对齐、垂直方向靠上对齐。
*代码示例：默认的布局*
Document
*页面显示*
---
*代码示例：左对齐*
...
...
*页面显示*
---
*代码示例：水平居中、垂直居中*
...
...
*页面显示*
> 在没有x-系列的class时，使用data-gap会让子元素自动按比例调整宽度，使每个子元素之间的间隔等于daga-gap的值，并且所有的子元素正好在水平方向上铺满。对某个子元素使用no-系列class可以禁止放大或缩小，其他子元素仍然按比例伸缩。
*代码示例：自动调整*
...
...
*页面显示*
---
*代码示例：禁止伸缩*
...
...
*页面显示*
