forked from lzxb/flex.css
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
212 lines (208 loc) · 8.14 KB
/
index.html
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
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
<!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="./dist/flex-css-layout.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;">NodeJS前端分享群：133240225</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>
<li>first：第一个子元素不要多余空间，其他子元素平分多余空间</li>
<li>last：最后一个子元素不要多余空间，其他子元素平分多余空间</li>
<li>justify：两端第一个元素不要多余空间，其他子元素平分多余空间</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:left box:first">第一个固定</span>
<span
data-set="dir:left box:last">最后一个固定</span><span data-set="dir:left box:justify">两端第一个固定</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">子元素高度设置：<span class="on" data-set="dir:top box:mean">平分</span><span data-set="dir:top box:first">第一个固定</span>
<span
data-set="dir:top box:last">最后一个固定</span><span data-set="dir:top box:justify">两端第一个固定</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 box:first">
<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">
<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>