-
Notifications
You must be signed in to change notification settings - Fork 94
/
Copy pathindex.html
353 lines (353 loc) · 15.3 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
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex-layout</title>
<link rel="stylesheet" href="dist/flex-layout.css">
<link rel="stylesheet" href="example/layout.css">
<link rel="stylesheet" href="example/index.css">
</head>
<body>
<div class="m-container flex-row">
<div class="m-header flex-column flex-middle">
<h1 class="logo">
<a href="https://github.com/Coffcer/flex-layout">Flex-Layout</a>
</h1>
<small class="subtitle">基于flexbox的栅格化布局库，提供更直观、丰富的布局方式</small>
<div class="menu">
<a href="https://github.com/Coffcer/flex-layout">Github</a>
</div>
</div>
<div class="m-content flex-column flex-item">
<div class="m-sidebar">
<ul class="m-nav">
<li class="active">
<a href="#summary">flex-layout 概述</a>
</li>
<li>
<a href="#usage">Usage 用法</a>
</li>
<li>
<a href="#responsive">Responsive 响应式</a>
</li>
<li>
<a href="#example">Example 实例</a>
</li>
</ul>
</div>
<div class="m-main">
<div id="summary" class="panel">
<h2>flex-layout</h2>
<p>flex-layout基于24个栅格布局，与传统栅格化的使用方式类同，但提供了更直观、丰富的布局方式。</p>
<div class="demo demo1">
<div class="flex-column">
<div class="flex-item-24">flex-item-24</div>
<div class="flex-item-12">flex-item-12</div>
<div class="flex-item-12">flex-item-12</div>
<div class="flex-item-8">flex-item-8</div>
<div class="flex-item">flex-item 自动填充宽度</div>
<div class="flex-item-8">flex-item-8</div>
<div class="flex-item-8">flex-item-8</div>
<div class="flex-item-8 flex-offset-8">flex-item-8 , flex-offset-8</div>
</div>
</div>
</div>
<div class="panel">
<h2>概述</h2>
<p>与传统的栅格化一样，flex-layout基于[容器] (相当于Bootstrap的row) 和[栅格] (相当于Bootstrap的column) 来布局:</p>
<ol>
<li>[容器]有两种：
<p>flex-column: 容器里的[栅格]以横向排列，与传统栅格化的row一样<br>flex-row: 容器里的[栅格]以竖向排列，就像header、content、footer的排列一样</p>
</li>
<li>通常，只有[栅格]可以直接放在[容器]中，而你的内容应该放在[栅格]里。但这不是必须的，直接把内容放在[容器]里也没问题。</li>
<li>如果一个[容器]里包含的[栅格]超过24格，多出的部分将另起一行。</li>
<li>IE的话只兼容IE10+，其他主流浏览器都支持，具体可以看：<a href="http://caniuse.com/#search=flex" target="_blank">兼容性</a></li>
<li>Flexbox有主轴，副轴的概念，flex-layout已经封装好了，你不需要懂得flexbox，也无需针对不同轴使用不同的class。<br>
不过，如果你对Flexbox有所了解的话，用起来会更顺手，推荐阮一峰的<a href="http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html">Flex 布局教程</a>
</li>
<li>与Bootstrap等栅格化不同的是：flex-layout不需要container，栅格本身不自带padding。</li>
</ol>
</div>
<div class="panel">
<h2>优势</h2>
<p>flex-layout解决了css布局的不少问题，这里所说的大多在下面的Example里可以看到:</p>
<ol>
<li>应用一个class就可以垂直居中。</li>
<li>轻松实现多栏同高。</li>
<li>自动计算间距，实现等宽布局，不需要再计算margin。</li>
<li>支持自动填充剩余宽度，以往我们需要通过触发BFC来实现。</li>
<li>支持自动填充剩余高度，比如将footer置于底部。</li>
<li>随意调整[栅格]顺序，比如让main比sidebar提前渲染出来。</li>
<li>丰富的对齐方式：上、下、左、右、左上、右上、左下、右下。</li>
</ol>
</div>
<div id="usage" class="panel">
<h2>用法</h2>
<div class="box">
<div class="head">
<span class="title">flex-middle 垂直居中</span>
<span class="title">flex-center 水平居中</span>
<p class="tip">这两个class应用在[容器]上时，所有子flex-item都会垂直或水平居中。也可以单独应用在[栅格]上，使特定栅格居中对齐。</p>
</div>
<div class="demo flex-row flex-middle flex-center" style="min-height: 180px">
<div class="flex-item-8" style="margin-bottom: 10px">无论是多行还是单行，都可以垂直居中</div>
<div class="flex-item-8">无论是多行还是单行，都可以垂直居中</div>
</div>
</div>
<div class="box">
<div class="head">
<span class="title">flex-offset-* 向左偏移</span>
<p class="tip">这个class应用在[栅格]上，指定[栅格]向左偏移多少格。</p>
</div>
<div class="demo flex-column">
<div class="flex-item-8">flex-item-8</div>
</div>
<div class="demo flex-column">
<div class="flex-item-8 flex-offset-8">flex-item-8, flex-offset-8</div>
</div>
<div class="demo flex-column">
<div class="flex-item-8 flex-offset-16">flex-item-8, flex-offset-16</div>
</div>
</div>
<div class="box">
<div class="head">
<span class="title">flex-order-* 排序 </span>
<p class="tip">这个class应用在[栅格]上，order越小排在越前面。</p>
</div>
<div class="demo flex-column">
<div class="flex-item-6 flex-order-4">flex-order-4</div>
<div class="flex-item-6 flex-order-3">flex-order-3</div>
<div class="flex-item-6 flex-order-2">flex-order-2</div>
<div class="flex-item-6 flex-order-1">flex-order-1</div>
</div>
</div>
<div class="box">
<div class="head">
<span class="title">flex-left 左对齐</span>
<span class="title">flex-right 右对齐</span>
<p class="tip">这两个class应用在[容器]上时，所有子flex-item都会左右对其。也可以单独应用在[栅格]上。</p>
</div>
<div class="demo flex-column flex-left">
<div class="flex-item-6">左对齐</div>
<div class="flex-item-6">左对齐</div>
<div class="flex-item-6">左对齐</div>
</div>
<div class="demo flex-column flex-right">
<div class="flex-item-6">右对齐</div>
<div class="flex-item-6">右对齐</div>
<div class="flex-item-6">右对齐</div>
</div>
<div class="demo flex-row flex-left">
<div class="flex-item-6">左对齐</div>
<div class="flex-item-6 flex-right">右对齐</div>
<div class="flex-item-6">左对齐</div>
</div>
<div class="demo flex-row flex-right">
<div class="flex-item-6">右对齐</div>
<div class="flex-item-6 flex-left">左对齐</div>
<div class="flex-item-6">右对齐</div>
</div>
</div>
<div class="box">
<div class="head">
<span class="title">flex-top 顶部对齐</span>
<span class="title">flex-bottom 底部对齐</span>
<p class="tip">这两个class应用在[容器]上时，所有子flex-item都会上下对其。也可以单独应用在[栅格]上。</p>
</div>
<div class="demo flex-column flex-top" style="height: 80px">
<div class="flex-item-6">顶部对齐</div>
<div class="flex-item-6">底部对齐</div>
<div class="flex-item-6">顶部对齐</div>
</div>
<div class="demo flex-column flex-bottom" style="height: 80px">
<div class="flex-item-6">底部对齐</div>
<div class="flex-item-6">顶部对齐</div>
<div class="flex-item-6">底部对齐</div>
</div>
<div class="demo flex-row flex-top" style="height: 140px">
<div class="flex-item-6">顶部对齐</div>
<div class="flex-item-6">顶部对齐</div>
<div class="flex-item-6 flex-bottom">底部对齐</div>
</div>
<div class="demo flex-row flex-bottom flex-right" style="height: 140px">
<div class="flex-item-6 flex-top">顶部对齐</div>
<div class="flex-item-6">底部对齐</div>
<div class="flex-item-6">底部对齐</div>
</div>
</div>
<div class="box">
<div class="head">
<span class="title">flex-between 等宽对齐</span>
<p class="tip">这个class应用在[容器]上，自动调整栅格间距，保持两边间距相同。</p>
</div>
<div class="demo flex-column flex-between">
<div class="flex-item-4">等宽对齐</div>
<div class="flex-item-4">等宽对齐</div>
<div class="flex-item-4">等宽对齐</div>
<div class="flex-item-4">等宽对齐</div>
</div>
<div class="demo flex-row flex-between flex-center" style="height: 250px">
<div class="flex-item-6">等宽对齐</div>
<div class="flex-item-6">等宽对齐</div>
<div class="flex-item-6">等宽对齐</div>
<div class="flex-item-6">等宽对齐</div>
</div>
</div>
<div class="box">
<div class="head">
<span class="title">flex-around 分散排列</span>
<p class="tip">这个class应用在[容器]上，与等宽对齐相同，但最左、最右、最上、最下的间距比[栅格]之间的间距大一倍。</p>
</div>
<div class="demo flex-column flex-around">
<div class="flex-item-4">分散排列</div>
<div class="flex-item-4">分散排列</div>
<div class="flex-item-4">分散排列</div>
<div class="flex-item-4">分散排列</div>
</div>
<div class="demo flex-row flex-around flex-center" style="height: 300px">
<div class="flex-item-6">分散排列</div>
<div class="flex-item-6">分散排列</div>
<div class="flex-item-6">分散排列</div>
<div class="flex-item-6">分散排列</div>
</div>
</div>
<div class="box">
<div class="head">
<span class="title">嵌套布局</span>
</div>
<div class="demo flex-column flex-center">
<div class="flex-item-12 flex-row">
<div class="flex-item">flex-item</div>
<div class="flex-item">flex-item</div>
</div>
<div class="flex-item-8 flex-row">
<div class="flex-item">flex-item</div>
<div class="flex-item">flex-item</div>
<div class="flex-item">flex-item</div>
</div>
</div>
</div>
</div>
<div id="responsive" class="panel">
<h2>响应式</h2>
<p>flex-layout提供了基础的响应式功能，当分辨率小于某个阈值时，你可以指定：</p>
<ol>
<li>[容器]从横向排列变为竖向排列，并且[栅格]宽度为100%</li>
<li>隐藏指定[栅格]</li>
<li>显示指定[栅格]</li>
</ol>
<div class="box">
<div class="head">
<span class="title">flex-md</span>
<p class="tip">这个class应用在[容器]上，当分辨率低于992px的时候，使[容器]变为竖向排列</p>
</div>
<div class="demo flex-column flex-md">
<div class="flex-item">flex-item</div>
<div class="flex-item">flex-item</div>
<div class="flex-item">flex-item</div>
<div class="flex-item">flex-item</div>
</div>
</div>
<div class="box">
<div class="head">
<span class="title">flex-sm</span>
<p class="tip">这个class应用在[容器]上，当分辨率低于768px的时候，使[容器]变为竖向排列</p>
</div>
<div class="demo flex-column flex-sm">
<div class="flex-item">flex-item</div>
<div class="flex-item">flex-item</div>
<div class="flex-item">flex-item</div>
<div class="flex-item">flex-item</div>
</div>
</div>
<div class="box">
<div class="head">
<span class="title">flex-md-hide</span>
<p class="tip">这个class应用在[容器]或[栅格]上，当分辨率低于992px的时候，隐藏[栅格]或[容器]</p>
</div>
<div class="demo flex-column">
<div class="flex-item">flex-item</div>
<div class="flex-item flex-md-hide">低于992px则隐藏该栅格</div>
<div class="flex-item">flex-item</div>
<div class="flex-item">flex-item</div>
</div>
<div class="demo flex-column flex-md-hide">
<div class="flex-item">低于992px则隐藏整个容器</div>
<div class="flex-item">低于992px则隐藏整个容器</div>
</div>
</div>
<div class="box">
<div class="head">
<span class="title">flex-sm-hide</span>
<p class="tip">这个class应用在[容器]或[栅格]上，当分辨率低于768px的时候，隐藏[栅格]或[容器]</p>
</div>
<div class="demo flex-column">
<div class="flex-item">flex-item</div>
<div class="flex-item flex-sm-hide">低于768px则隐藏该栅格</div>
<div class="flex-item">flex-item</div>
<div class="flex-item">flex-item</div>
</div>
<div class="demo flex-column flex-sm-hide">
<div class="flex-item">低于768px则隐藏整个容器</div>
<div class="flex-item">低于768px则隐藏整个容器</div>
</div>
</div>
<div class="box">
<div class="head">
<span class="title">flex-md-show</span>
<p class="tip">这个class应用在[容器]或[栅格]上，当分辨率低于992px的时候，显示[栅格]或[容器]</p>
</div>
<div class="demo flex-column">
<div class="flex-item-24">把浏览器窗口调小试试</div>
<div class="flex-item flex-md-show">低于992px的时候出现</div>
<div class="flex-item flex-md-show">低于992px的时候出现</div>
<div class="flex-item flex-md-show">低于992px的时候出现</div>
</div>
</div>
<div class="box">
<div class="head">
<span class="title">flex-sm-show</span>
<p class="tip">这个class应用在[容器]或[栅格]上，当分辨率低于7682px的时候，显示[栅格]或[容器]</p>
</div>
<div class="demo flex-column">
<div class="flex-item-24">把浏览器窗口调小试试</div>
<div class="flex-item flex-sm-show">低于768px的时候出现</div>
<div class="flex-item flex-sm-show">低于768px的时候出现</div>
<div class="flex-item flex-sm-show">低于768px的时候出现</div>
</div>
</div>
</div>
<div id="example" class="panel">
<h2>实例</h2>
<div class="box">
<div class="head">
<span class="title">响应式圣杯布局</span>
<p class="tip">main优先显示，宽度低于992px时候main和side-right变为水平排列, side-left隐藏</p>
</div>
<div class="demo flex-row">
<div class="flex-item">header</div>
<div class="flex-column flex-md" style="min-height: 100px">
<div class="flex-item-14 flex-order-2">main</div>
<div class="flex-item flex-order-1 flex-md-hide">side-left</div>
<div class="flex-item flex-order-3">side-right</div>
</div>
<div class="flex-item">footer</div>
</div>
</div>
<div class="box">
<div class="head">
<span class="title">多栏同高，flex-column默认便是。</span>
</div>
<div class="demo flex-column">
<div class="flex-item-8">sidebar</div>
<div class="flex-item-16" style="height: 400px">main</div>
</div>
</div>
</div>
<a href="https://github.com/Coffcer/flex-layout" style="margin-right: 20px">Github</a>
<a href="#">返回顶部</a>
</div>
</div>
</div>
</body>
</html>