forked from tomatobybike/flex
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
186 lines (182 loc) · 6.94 KB
/
index.html
File metadata and controls
186 lines (182 loc) · 6.94 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; minimum-scale=1.0; maximum-scale=1.0">
<title>flex.css 移动端flex布局神器</title>
<link href="flex.min.css" rel="stylesheet">
<link href="demo.css" rel="stylesheet">
</head>
<body>
<div class="about">flex.css，轻量级移动端布局神器，让你用最快的速度，并且用最优雅的方式完成复杂的移动端布局，让你专注于编写内容呈现效果，完美兼容Android，ios，微信端。
<br> <b style="color:#49ff00;">深圳html5开发者社群：170761660</b>
<br> <b style="color:#49ff00;">github：https://github.com/1340641314/flex</b>
</div>
<div class="item">
<div class="tit">快速入门</div>
<div class="content">flex只有两个属性，一个是容器属性flex，一个是子元素属性flex-box
<br> 如：
<textarea>
<div flex="dir:left main:left cross:top">
<div flex-box="0"></div>
</div>
</textarea>
</div>
</div>
<div class="item">
<div class="tit">flex属性大全</div>
<ul class="attr">
<li>
<h3>dir：主轴方向</h3>
<ul class="query">
<li>top：从上到下</li>
<li>right：从右到左</li>
<li>bottom：从上到下</li>
<li>left：从左到右（默认）</li>
</ul>
</li>
<li>
<h3>main：主轴对齐方式</h3>
<ul class="query">
<li>right：从右到左</li>
<li>left：从左到右（默认）</li>
<li>justify：两端对齐</li>
<li>center：居中对齐</li>
</ul>
</li>
<li>
<h3>cross：交叉轴对齐方式</h3>
<ul class="query">
<li>top：从上到下</li>
<li>bottom：从上到下</li>
<li>baseline：跟随内容高度对齐</li>
<li>center：居中对齐</li>
<li>stretch：高度并排铺满（默认）</li>
</ul>
</li>
<li>
<h3>box：子元素设置</h3>
<ul class="query">
<li>mean：子元素平分空间</li>
</ul>
</li>
</ul>
</div>
<div class="item">
<div class="tit">flex-box属性说明</div>
<div class="content">
取值范围(0-10)，单独设置子元素剩余空间的如何分配，设置为0，则子元素不占用多余的剩余空间
<br>剩余空间分配 = 当前box值/子元素的box值相加之和
</div>
</div>
<div class="item">
<div class="tit">主轴方向：<span data-set="dir:top">从上到下</span><span data-set="dir:right">从右到左</span><span data-set="dir:bottom">从下到上</span><span class="on" data-set="dir:left">从左到右</span></div>
<div class="content">
<div class="demo" flex="dir:left">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</div>
</div>
<div class="item">
<div class="tit">主轴对齐方式：<span data-set="main:right">从右到左</span><span class="on" data-set="main:left">从左到右</span><span data-set="main:justify">两端对齐</span><span data-set="main:center">居中对齐</span></div>
<div class="content">
<div class="demo" flex="main:left">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</div>
</div>
<div class="item">
<div class="tit">交叉轴对齐方式：<span data-set="cross:top">从上到下</span><span data-set="cross:bottom">从下到上</span><span data-set="cross:baseline">跟随内容高度对齐</span><span data-set="cross:center">居中对齐</span><span class="on" data-set="cross:stretch">高度并排铺满</span></div>
<div class="content">
<div class="demo" flex="cross:stretch">
<div>1
<br>1*2</div>
<div>2
<br>2*2
<br>2*3</div>
<div>3
<br>3*2
<br>3*3
<br>3*4</div>
</div>
</div>
</div>
<div class="item">
<div class="tit">子元素设置：<span class="on" data-set="dir:left box:mean">左右平分宽度</span><span data-set="dir:top box:mean">上下平分宽度</span></div>
<div class="content">
<div class="demo" flex="box:mean">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</div>
</div>
<div class="item">
<div class="tit">左边固定宽度，右边把剩余宽度占满</div>
<div class="content">
<div class="demo" flex>
<div flex-box="0">1</div>
<div flex-box="1">2</div>
</div>
</div>
</div>
<div class="item">
<div class="tit">右边固定宽度，左边把剩余宽度占满</div>
<div class="content">
<div class="demo" flex="dir:right">
<div flex-box="0">1</div>
<div flex-box="1">2</div>
</div>
</div>
</div>
<div class="item">
<div class="tit">上边固定宽度，下边把剩余宽度占满</div>
<div class="content">
<div class="demo" flex="dir:top">
<div flex-box="0">1</div>
<div flex-box="1">2</div>
</div>
</div>
</div>
<div class="item">
<div class="tit">下边固定宽度，上边把剩余宽度占满</div>
<div class="content">
<div class="demo" flex="dir:top">
<div flex-box="1">1</div>
<div flex-box="0">2</div>
</div>
</div>
</div>
<div class="item">
<div class="tit">左右两边对齐</div>
<div class="content">
<div class="demo" flex="main:justify">
<div>1</div>
<div>2</div>
</div>
</div>
</div>
<div class="item">
<div class="tit">上下两边对齐</div>
<div class="content">
<div class="demo" flex="dir:top main:justify">
<div>1</div>
<div>2</div>
</div>
</div>
</div>
<div class="item">
<div class="tit">垂直居中</div>
<div class="content">
<div class="demo" flex="main:center cross:center">
<div>1</div>
</div>
</div>
</div>
<script src="demo.js"></script>
</body>
</html>