https://github.com/zanjs/layout-flex
https://github.com/zanjs/layout-flex
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/zanjs/layout-flex
- Owner: zanjs
- Created: 2016-06-24T09:54:01.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2019-09-09T06:35:54.000Z (almost 6 years ago)
- Last Synced: 2025-03-28T01:11:43.472Z (3 months ago)
- Language: HTML
- Size: 13.5 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
layout-flex
====
### 安装
```
npm install layout-flex --save
```
### 为什么需要layout-flex?
```
在移动端开发中，并不是所有的浏览器，webview，微信等各种版本都支持标准的flex，
但是基本上都会支持-webkit-box，所以flex.css的主要作用是保证每一个属性都能支持标准flex或旧版本的-webkit-box。
由于flex.css采用了autoprefixer编译，所以能够保证在浏览器不支持标准flex布局的情况下，
回滚到旧版本的-webkit-box，保证移动设备中能呈现出一样的布局效果。
于是，一款移动端快速布局的神器诞生了...
```
### 优点
```
简洁的api，熟悉的属性值，入门毫无压力。
在html中采用属性的方式布，将布局和css进行分离，清晰的布局结构让你更容易维护，可以在不更改css的情况下更改布局。
特别是在React中使用data-flex属性布局，维护起来更加的方便。
```
### 支持情况
```
flex布局分为旧版本dispaly: box;，过渡版本dispaly: flexbox;，以及现在的标准版本display: flex;
Android
2.3 开始就支持旧版本 display:-webkit-box;
4.4 开始支持标准版本 display: flex;
IOS
6.1 开始支持旧版本 display:-webkit-box;
7.1 开始支持标准版本 display: flex;
PC
如果你不需要兼容ie10以下版本，也是可以使用layout-flex
layout-flex同时能兼容新版本和旧版本，保证了浏览器不支持新版本时，回退到旧版本。
```
### 使用
```html
看看我是不是居中的
看看我是不是居中的
```
### flex属性大全
```
dir：主轴方向
top：从上到下
right：从右到左
bottom：从上到下
left：从左到右（默认）
```
```
main：主轴对齐方式
right：从右到左
left：从左到右（默认）
justify：两端对齐
center：居中对齐
```
```
cross：交叉轴对齐方式
top：从上到下
bottom：从上到下
baseline：跟随内容高度对齐
center：居中对齐
stretch：高度并排铺满（默认）
```
```
box：子元素设置
mean：子元素平分空间
first：第一个子元素不要多余空间，其他子元素平分多余空间
last：最后一个子元素不要多余空间，其他子元素平分多余空间
justify：两端第一个元素不要多余空间，其他子元素平分多余空间
```
### flex-box属性说明
```
取值范围(0-10)，单独设置子元素多余空间的如何分配，设置为0，则子元素不占用多余的多余空间
多余空间分配 = 当前flex-box值/子元素的flex-box值相加之和
```