-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
606 lines (603 loc) · 38.9 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
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
<!DOCTYPE html>
<!-- saved from url=(0023)http://ptb2.me/flexbox/ -->
<html class=" js flexbox webkitbox" lang="en" prefix="og: http://ogp.me/ns#" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>Flexbox / Flexible Box 布局 CSS 手册 - ptb2.me</title>
<meta content="Browser SupportChrome 4.0+, Firefox 2.0+, Safari 1.1+ including all versions of Safari on iOS support flexbox using the July 2009 working draft syntax. These browsers require prefixed flexbox prope..." name="description" property="og:description">
<meta content="Flexbox / Flexible Box 布局 CSS 手册" property="og:title">
<meta content="article" property="og:type">
<meta content="http://ptb2.me/flexbox/" property="og:url">
<meta content="summary" name="twitter:card">
<meta content="@ptb" name="twitter:creator">
<meta content="initial-scale=1, width=device-width" name="viewport">
<link href="./style-65c1d75a.css" rel="stylesheet">
<link href="http://ptb2.me/subscribe/feed.atom" rel="alternate" type="application/atom+xml">
<link href="http://ptb2.me/subscribe/feed.rss" rel="alternate" type="application/rss+xml">
<link href="http://microformats.org/profile/hatom" rel="profile">
<link href="http://microformats.org/profile/hcard" rel="profile">
<style type="text/css">
/* line 1, (__TEMPLATE__) */
.initial {
text-decoration: underline;
}
</style>
</head>
<body itemscope="" itemtype="http://www.schema.org/Blog">
<header role="banner">
<div class="container">
<div class="row">
<div class="span4">
<h1><a href="http://ptb2.me/">ptb2.me</a>
</h1>
</div>
<div class="span8">
<ul class="topics" role="navigation">
<li><a href="http://ptb2.me/code/" itemprop="keywords" rel="tag">Code</a>
</li>
</ul>
</div>
</div>
</div>
</header>
<hr>
<main id="main" role="main">
<article class="container hentry" itemprop="blogPost" itemscope="" itemtype="http://schema.org/BlogPosting">
<header class="row">
<div class="span6">
<ul class="tags" role="navigation">
<li><a href="http://ptb2.me/code/" itemprop="keywords" rel="tag">Code</a>
</li>
</ul>
</div>
<div class="span6">
<span class="author vcard" itemprop="author" itemscope="" itemtype="http://schema.org/Person">
<a class="url" href="http://ptb2.me/about/" itemprop="url" rel="author">
<span class="fn n" itemprop="name">
<span class="given-name" itemprop="givenName">Peter</span>
<span class="additional-name" itemprop="additionalName">T.</span>
<span class="family-name" itemprop="familyName">Bosse</span>
<span class="honorific-suffix" itemprop="honorificSuffix">II</span>
</span>
</a>
</span>
</div>
</header>
<div>
<div class="row">
<div class="span10 offset1">
<h2 class="entry-title" itemprop="headline">Flexbox / Flexible Box 布局 CSS 手册</h2>
</div>
</div>
<div class="entry-content" itemprop="articleBody">
<div class="row">
<div class="span10 offset1">
<h3>浏览器支持</h3>
<p>Chrome 4.0+, Firefox 2.0+, Safari 1.1+ 以及所有 iOS 上的 Safari <a href="http://caniuse.com/flexbox">支持 flexbox</a> 的 <a href="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">July 2009 working draft syntax</a>版本. 这些浏览器需要在 flexbox 属性加上前缀. Chrome 和 Safari 3.0+ (包括 iOS) 需要有在
<code>-webkit-</code>前缀, Firefox 需要有
<code>-moz-</code>前缀, Safari 1.1 和 2.0 需要有
<code>-khtml-</code>前缀.</p>
<p>Internet Explorer 10 <a href="http://msdn.microsoft.com/library/ie/hh673531.aspx">支持 flexbox</a> 的 <a href="http://www.w3.org/TR/2012/WD-css3-flexbox-20120322/">March 2012 working draft syntax</a> 版本, 需要
<a href="http://msdn.microsoft.com/library/ie/hh772069.aspx">
<code>-ms-</code>前缀的</a>属性.</p>
<p><a href="https://www.google.com/chrome/">Chrome</a> 21+, <a href="http://www.mozilla.org/firefox/">Firefox</a> 20+, <a href="http://nightly.webkit.org/">WebKit Nightly</a>, and <a href="http://www.opera.com/">Opera</a> 12.1+ 支持 flexbox 的 <a href="http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/">September 2012 candidate recommendation syntax</a> 版本. Chrome 和 WebKit Nightly 需要有
<code>-webkit-</code> 前缀. Firefox 和 Opera 支持无前缀的属性.</p>
<hr>
<h3>已知的 issue</h3>
<p>根据 <a href="http://oli.jp/2011/css3-flexbox/#shrieking-eels">Oli Studholme</a> 和 <a href="http://the-echoplex.net/flexyboxes/">Pete Boere</a>, 已经有一些关于一些主流浏览器和他们的 flexbox 实现的 issue. 比如, Firefox 19.0 和早期的版本, 设置在 flex item 的百分比 width 和 <code>overflow: hidden</code> 将会被忽略,
结果是当内容比 child 设置的 width 大时 flexbox child 会撑开. 出于这两个原因, I've excluded Firefox 19 and earlier from using flexbox with the <a href="http://ptb2.me/flexgrid/">ptb/flexgrid</a> framework.</p>
</div>
</div>
<div class="row">
<div class="span12">
<hr>
</div>
</div>
<div class="row">
<div class="span12">
<h3>Flex 容器</h3>
</div>
</div>
<div class="row">
<div class="span6">
<p>Flexible boxes, 也叫做 flex 容器, 通过在容器元素上设置
<a href="http://dev.w3.org/csswg/css-flexbox/#flex-containers">
<code>display</code>
</a>属性来创建. 属性被排列的特定的顺序, 当前草案的语法在前, 各个厂商推荐的语法放在最后.</p>
</div>
<div class="span6" style="background-color: #fcc; -webkit-align-self: center">
<code><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/css/property/display">display</a>:
<var title="The element is displayed in its own flex box.">-webkit-box</var>|
<var title="The element is displayed inline in its own flex box.">-webkit-inline-box</var>
<br><a href="https://developer.mozilla.org/docs/CSS/Flexbox">display</a>:
<var>-moz-box</var>|
<var>-moz-inline-box</var>
<br><a href="http://msdn.microsoft.com/library/ie/ms530751.aspx">display</a>:
<var title="Specifies a block-level flexible box container.">-ms-flexbox</var>|
<var title="Specifies an inline-level flexible box container.">-ms-inline-flexbox</var>
<br><a href="https://developer.mozilla.org/docs/CSS/display">display</a>:
<var title="This value causes an element to generate a block-level flex container box.">-webkit-flex</var>|
<var title="This value causes an element to generate a inline-level flex container box.">-webkit-inline-flex</var>
<br><a href="http://www.w3.org/TR/css3-flexbox/#flex-containers">display</a>:
<var title="This value causes an element to generate a block-level flex container box.">flex</var>|
<var title="This value causes an element to generate a inline-level flex container box.">inline-flex</var>
</code>
</div>
</div>
<div class="row">
<div class="span12">
<hr>
</div>
</div>
<div class="row">
<div class="span12">
<h3>主轴线朝向和方向</h3>
</div>
</div>
<div class="row">
<div class="span3">
<p>这些属性通过设置容器主轴线的朝向和方向, 指定了 items 在容器里怎样排放.</p>
</div>
<div class="span9" style="background-color: #fcc; -webkit-align-self: center">
<code>
<span title="A box may lay out its children either horizontally or vertically."><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/css/property/-webkit-box-orient">-webkit-</a><a href="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/#propdef-box-orient">box-orient</a>:</span>
<var title="The box displays its children along the block axis.">block-axis</var>|
<var class="v1" title="The box displays its children from left to right in a horizontal line.">horizontal</var>|
<var class="initial" title="The box displays its children along the inline axis.">inline-axis</var>|
<var class="v2" title="The box displays its children from stacked from top to bottom vertically.">vertical</var>
<br>
<span title="This property specifies the direction in which children of a box are displayed."><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/css/property/-webkit-box-direction">-webkit-</a><a href="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/#propdef-box-direction">box-direction</a>:</span>
<var class="initial" title="A box with a computed value of horizontal for box-orient displays its children from left to right. A box with a computed value of vertical displays its children from top to bottom.">normal</var>|
<var class="v3" title="A box with a computed value of horizontal for box-orient displays its children from right to left. A box with a computed value of vertical displays its children from bottom to top.">reverse</var>
<br>
<span title="A box may lay out its children either horizontally or vertically."><a href="https://developer.mozilla.org/docs/CSS/box-orient">-moz-</a><a href="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/#propdef-box-orient">box-orient</a>:</span>
<var title="The box displays its children along the block axis.">block-axis</var>|
<var class="v1" title="The box displays its children from left to right in a horizontal line.">horizontal</var>|
<var class="initial" title="The box displays its children along the inline axis.">inline-axis</var>|
<var class="v2" title="The box displays its children from stacked from top to bottom vertically.">vertical</var>
<br>
<span title="This property specifies the direction in which children of a box are displayed."><a href="https://developer.mozilla.org/docs/CSS/box-direction">-moz-</a><a href="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/#propdef-box-direction">box-direction</a>:</span>
<var class="initial" title="A box with a computed value of horizontal for box-orient displays its children from left to right. A box with a computed value of vertical displays its children from top to bottom.">normal</var>|
<var class="v3" title="A box with a computed value of horizontal for box-orient displays its children from right to left. A box with a computed value of vertical displays its children from bottom to top.">reverse</var>
<br>
<span title="This property specifies how flexbox items are placed in the flexbox, by setting the direction of the main axis."><a href="http://msdn.microsoft.com/library/ie/jj127299.aspx">-ms-</a><a href="http://www.w3.org/TR/2012/WD-css3-flexbox-20120322/#flex-direction">flex-direction</a>:</span>
<var class="v2" title="The main axis has the same orientation as the block axis of the current writing mode (the direction that blocks are laid out in).">column</var>|
<var title="Same as column, except the main-start and main-end directions are swapped.">
<span class="v2">column</span>-
<span class="v3">reverse</span>
</var>|
<var class="initial v1" title="The main axis has the same orientation as the inline axis of the current writing mode (the direction that text is laid out in).">row</var>|
<var title="Same as row, except the main-start and main-end directions are swapped.">
<span class="v1">row</span>-
<span class="v3">reverse</span>
</var>
<br>
<span title="This property specifies how flex items are placed in the flex container, by setting the direction of the main axis."><a href="https://developer.mozilla.org/docs/CSS/flex-direction">-webkit-</a><a href="http://www.w3.org/TR/css3-flexbox/#flex-direction-property">flex-direction</a>:</span>
<var title="The main axis has the same orientation as the block axis of the current writing mode.">column</var>|
<var title="Same as column, except the main-start and main-end directions are swapped.">column-reverse</var>|
<var class="initial" title="The main axis has the same orientation as the inline axis of the current writing mode.">row</var>|
<var title="Same as row, except the main-start and main-end directions are swapped.">row-reverse</var>
<br>
<span title="This property specifies how flex items are placed in the flex container, by setting the direction of the main axis."><a href="http://www.w3.org/TR/css3-flexbox/#flex-direction-property">flex-direction</a>:</span>
<var title="The main axis has the same orientation as the block axis of the current writing mode.">column</var>|
<var title="Same as column, except the main-start and main-end directions are swapped.">column-reverse</var>|
<var class="initial" title="The main axis has the same orientation as the inline axis of the current writing mode.">row</var>|
<var title="Same as row, except the main-start and main-end directions are swapped.">row-reverse</var>
</code>
</div>
</div>
<div class="row">
<div class="span12">
<hr>
</div>
</div>
<div class="row">
<div class="span12">
<h3>单行或者多行与轴线正交的方向</h3>
</div>
</div>
<div class="row">
<div class="span5">
<p>这些属性控制着 flex 容器是单行还是多行, 和轴线正交的方向, 确定了在新的行里陈列的方向.</p>
</div>
<div class="span7" style="background-color: #fcc; -webkit-align-self: center">
<code>
<span title="By default a horizontal box will lay out its children in a single row, and a vertical box will lay out its children in a single column."><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/css/property/-webkit-box-lines">-webkit-</a><a href="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/#propdef-box-lines">box-lines</a>:</span>
<var title="The box is allowed to expand to multiple lines (that is, multiple rows or columns) in order to accommodate all of its children">multiple</var>|
<var class="initial" title="All elements will be placed in a single row or column, and any elements that do not fit will simply be considered overflow.">single</var>
<br>
<span title="By default a horizontal box will lay out its children in a single row, and a vertical box will lay out its children in a single column."><a href="https://developer.mozilla.org/docs/CSS/box-lines">-moz-</a><a href="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/#propdef-box-lines">box-lines</a>:</span>
<var title="The box is allowed to expand to multiple lines (that is, multiple rows or columns) in order to accommodate all of its children">multiple</var>|
<var class="initial" title="All elements will be placed in a single row or column, and any elements that do not fit will simply be considered overflow.">single</var>
<br>
<span title="This property controls whether the flexbox is single-line or multi-line, and the direction of the cross axis, which affects the direction new lines are stacked in"><a href="http://msdn.microsoft.com/library/ie/jj127305.aspx">-ms-</a><a href="http://www.w3.org/TR/2012/WD-css3-flexbox-20120322/#flex-wrap">flex-wrap</a>:</span>
<var class="initial" title="All child elements are displayed in a single row or column.">none</var>|
<var title="Child elements are wrapped and displayed in successive, parallel rows or columns.">wrap</var>|
<var title="Child elements are wrapped and displayed in successive, parallel rows or columns in reverse order.">wrap-reverse</var>
<br>
<span title="This property controls whether the flex container is single-line or multi-line, and the direction of the cross-axis, which determines the direction new lines are stacked in."><a href="https://developer.mozilla.org/docs/CSS/flex-wrap">-webkit-</a><a href="http://www.w3.org/TR/css3-flexbox/#flex-wrap-property">flex-wrap</a>:</span>
<var class="initial" title="The flex container is single-line. The cross-start direction is equivalent to either the start or before/head direction of the current writing mode, whichever is in the cross axis, and the cross-end direction is the opposite direction of cross-start.">nowrap</var>|
<var title="The flex container is multi-line. The cross-start direction is equivalent to either the start or before/head direction of the current writing mode, whichever is in the cross axis, and the cross-end direction is the opposite direction of cross-start.">wrap</var>|
<var title="Same as wrap, except the cross-start and cross-end directions are swapped.">wrap-reverse</var>
<br>
<span title="This property controls whether the flex container is single-line or multi-line, and the direction of the cross-axis, which determines the direction new lines are stacked in."><a href="http://www.w3.org/TR/css3-flexbox/#flex-wrap-property">flex-wrap</a>:</span>
<var class="initial" title="The flex container is single-line. The cross-start direction is equivalent to either the start or before/head direction of the current writing mode, whichever is in the cross axis, and the cross-end direction is the opposite direction of cross-start.">nowrap</var>|
<var title="The flex container is multi-line. The cross-start direction is equivalent to either the start or before/head direction of the current writing mode, whichever is in the cross axis, and the cross-end direction is the opposite direction of cross-start.">wrap</var>|
<var title="Same as wrap, except the cross-start and cross-end directions are swapped.">wrap-reverse</var>
</code>
</div>
</div>
<div class="row">
<div class="span12">
<hr>
</div>
</div>
<div class="row">
<div class="span12">
<h3>direction 和 wrap 的简记的属性</h3>
</div>
</div>
<div class="row">
<div class="span4">
<p>The
<code>flex-flow</code> 属性是
<code>flex-direction</code> 和
<code>flex-wrap</code> 属性的简写, 同时定义了主轴和正交轴(main and cross axes).</p>
</div>
<div class="span8" style="background-color: #fcc; -webkit-align-self: center">
<code><a href="http://msdn.microsoft.com/library/ie/jj127300.aspx">-ms-</a><a href="http://www.w3.org/TR/2012/WD-css3-flexbox-20120322/#flex-flow">flex-flow</a>:
<var><-ms-flex-direction></var>||
<var><-ms-flex-wrap></var>
<br><a href="https://developer.mozilla.org/docs/CSS/flex-flow">-webkit-</a><a href="http://www.w3.org/TR/css3-flexbox/#flex-flow-property">flex-flow</a>:
<var><flex-direction></var>||
<var><flex-wrap></var>
<br><a href="http://www.w3.org/TR/css3-flexbox/#flex-flow-property">flex-flow</a>:
<var><flex-direction></var>||
<var><flex-wrap></var>
</code>
</div>
</div>
<div class="row">
<div class="span12">
<hr>
</div>
</div>
<div class="row">
<div class="span12">
<h3>改变显示顺序</h3>
</div>
</div>
<div class="row">
<div class="span5">
<p>flexbox 元素默认按照源代码中出现的顺序显示和布局. 这个元素可以用来改变这个顺序.</p>
</div>
<div class="span7" style="background-color: #fcc; -webkit-align-self: center">
<code>
<span><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/css/property/-webkit-box-ordinal-group">-webkit-</a><a href="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/#propdef-box-ordinal-group">box-ordinal-group</a>:</span>
<var class="initial">1</var>|
<var><positive integer></var>
<br>
<span><a href="https://developer.mozilla.org/docs/CSS/-moz-box-ordinal-group">-moz-</a><a href="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/#propdef-box-ordinal-group">box-ordinal-group</a>:</span>
<var class="initial">1</var>|
<var><positive integer></var>
<br>
<span><a href="http://msdn.microsoft.com/library/ie/jj127303.aspx">-ms-</a><a href="http://www.w3.org/TR/2012/WD-css3-flexbox-20120322/#flex-order">flex-order</a>:</span>
<var class="initial">0</var>|
<var><integer></var>
<br>
<span><a href="https://developer.mozilla.org/docs/CSS/order">-webkit-</a><a href="http://www.w3.org/TR/css3-flexbox/#order-property">order</a>:</span>
<var class="initial">0</var>|
<var><integer></var>
<br>
<span><a href="http://www.w3.org/TR/css3-flexbox/#order-property">order</a>:</span>
<var class="initial">0</var>|
<var><integer></var>
</code>
</div>
</div>
<div class="row">
<div class="span12">
<hr>
</div>
</div>
<div class="row">
<div class="span12">
<h3>适应性(flexibility)</h3>
</div>
</div>
<div class="row">
<div class="span12">
<p>flex 布局定义的方面是给予 flex 元素具有适应性和灵活性(flex),
根据可用的空间来改变宽度或者高度. 这些功能通过这些属性实现.
flex 容器把空闲的空间分配给元素以便和
<code>flex-grow</code> 因子成比例,
或者收缩元素防止他们超过
<code>flex-shrink</code> 因子的比例.</p>
</div>
</div>
<div class="row">
<div class="span10 offset1" style="background-color: #fcc; -webkit-align-self: center">
<code><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/css/property/-webkit-box-flex">-webkit-</a><a href="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/#propdef-box-flex">box-flex</a>:
<var class="initial">0.0</var>|
<var><positive floating-point number></var>
<br><a href="https://developer.mozilla.org/docs/CSS/-moz-box-flex">-moz-</a><a href="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/#propdef-box-flex">box-flex</a>:
<var class="initial">0.0</var>|
<var><positive floating-point number></var>
<br><a href="http://msdn.microsoft.com/library/ie/jj127297.aspx">-ms-</a><a href="http://www.w3.org/TR/2012/WD-css3-flexbox-20120322/#flexibility">flex</a>:
<var>
<span class="initial">none</span>(0 0 auto)</var>|
<br> [ [
<var><positive-flex:
<span class="initial">1</span>></var>
<var><negative-flex:
<span class="initial">0</span>></var>? ] ||
<var><preferred-size:
<span class="initial">0px</span>> ]</var>
<br><a href="https://developer.mozilla.org/docs/CSS/flex-grow">-webkit-</a><a href="http://www.w3.org/TR/css3-flexbox/#flex-grow-property">flex-grow</a>:
<var class="initial">0</var>|
<var><positive <a href="http://www.w3.org/TR/css3-values/#numbers">number</a>></var>
<br><a href="https://developer.mozilla.org/docs/CSS/flex-shrink">-webkit-</a><a href="http://www.w3.org/TR/css3-flexbox/#flex-shrink-property">flex-shrink</a>:
<var class="initial">1</var>|
<var><positive <a href="http://www.w3.org/TR/css3-values/#numbers">number</a>></var>
<br><a href="https://developer.mozilla.org/docs/CSS/flex-basis">-webkit-</a><a href="http://www.w3.org/TR/css3-flexbox/#flex-basis-property">flex-basis</a>:
<var class="initial">auto</var>|
<var><positive <a href="http://www.w3.org/TR/css3-values/#lengths">length</a>></var>
<br><a href="https://developer.mozilla.org/docs/CSS/flex">-webkit-</a><a href="http://www.w3.org/TR/css3-flexbox/#flex-property">flex</a>:
<var>none (0 0 auto)</var>|
<var>
<span class="initial">initial</span>(0 1 auto)</var>|
<var>auto (1 1 auto)</var>|
<br> [
<var><flex-grow:
<span class="initial">1</span>></var>
<var><flex-shrink:
<span class="initial">1</span>></var>? ||
<var><flex-basis:
<span class="initial">0</span>> ]</var>
<br><a href="http://www.w3.org/TR/css3-flexbox/#flex-grow-property">flex-grow</a>:
<var class="initial">0</var>|
<var><positive <a href="http://www.w3.org/TR/css3-values/#numbers">number</a>></var>
<br><a href="http://www.w3.org/TR/css3-flexbox/#flex-shrink-property">flex-shrink</a>:
<var class="initial">1</var>|
<var><positive <a href="http://www.w3.org/TR/css3-values/#numbers">number</a>></var>
<br><a href="http://www.w3.org/TR/css3-flexbox/#flex-basis-property">flex-basis</a>:
<var class="initial">auto</var>|
<var><positive <a href="http://www.w3.org/TR/css3-values/#lengths">length</a>></var>
<br><a href="http://www.w3.org/TR/css3-flexbox/#flex-property">flex</a>:
<var>none (0 0 auto)</var>|
<var>
<span class="initial">initial</span>(0 1 auto)</var>|
<var>auto (1 1 auto)</var>|
<br> [
<var><flex-grow:
<span class="initial">1</span>></var>
<var><flex-shrink:
<span class="initial">1</span>></var>? ||
<var><flex-basis:
<span class="initial">0</span>> ]</var>
</code>
</div>
</div>
<div class="row">
<div class="span12">
<hr>
</div>
</div>
<div class="row">
<div class="span12">
<h3>主轴的对齐和剩余空间的分配</h3>
</div>
</div>
<div class="row">
<div class="span5">
<p>这些元素将 flex 元素根据 flex 容器当前的一行来在主轴上对齐.
这个步骤将在所有适应性的长度和自动设置 margin 解析完成之后进行.</p>
</div>
<div class="span7" style="background-color: #fcc; -webkit-align-self: center">
<code><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/css/property/-webkit-box-pack">-webkit-</a><a href="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/#propdef-box-pack">box-pack</a>:
<var>center</var>|
<var>end</var>|
<var>justify</var>|
<var class="initial">start</var>
<br><a href="https://developer.mozilla.org/docs/CSS/-moz-box-pack">-moz-</a><a href="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/#propdef-box-pack">box-pack</a>:
<var>center</var>|
<var>end</var>|
<var>justify</var>|
<var class="initial">start</var>
<br><a href="http://msdn.microsoft.com/library/ie/jj127304.aspx">-ms-</a><a href="http://www.w3.org/TR/2012/WD-css3-flexbox-20120322/#flex-pack">flex-pack</a>:
<var>center</var>|
<var>end</var>|
<var>justify</var>|
<var class="initial">start</var>
<br><a href="https://developer.mozilla.org/docs/CSS/justify-content">-webkit-</a><a href="http://www.w3.org/TR/css3-flexbox/#justify-content-property">justify-content</a>:
<var>center</var>|
<var>flex-end</var>|
<br>
<var class="initial">flex-start</var>|
<var>space-around</var>|
<var>space-between</var>
<br><a href="http://www.w3.org/TR/css3-flexbox/#justify-content-property">justify-content</a>:
<var>center</var>|
<var>flex-end</var>|
<br>
<var class="initial">flex-start</var>|
<var>space-around</var>|
<var>space-between</var>
</code>
</div>
</div>
<div class="row">
<div class="span12">
<hr>
</div>
</div>
<div class="row">
<div class="span12">
<h3>正交轴(cross Axis)的对齐</h3>
<p>flex 元素可以根据 flex 容器当前行的正交轴进行对齐, 和上一节类似但作用在与之正交的方向上.
这些属性作用在 flex 容器上.</p>
</div>
</div>
<div class="row">
<div class="span10 offset1" style="background-color: #fcc; -webkit-align-self: center">
<code><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/css/property/-webkit-box-align">-webkit-</a><a href="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/#propdef-box-align">box-align</a>:
<var>baseline</var>|
<var>center</var>|
<var>end</var>|
<var>start</var>|
<var class="initial">stretch</var>
<br><a href="https://developer.mozilla.org/docs/CSS/-moz-box-align">-moz-</a><a href="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/#propdef-box-align">box-align</a>:
<var>baseline</var>|
<var>center</var>|
<var>end</var>|
<var>start</var>|
<var class="initial">stretch</var>
<br><a href="http://msdn.microsoft.com/library/ie/jj127298.aspx">-ms-</a><a href="http://www.w3.org/TR/2012/WD-css3-flexbox-20120322/#flex-align">flex-align</a>:
<var>baseline</var>|
<var>center</var>|
<var>end</var>|
<var>start</var>|
<var class="initial">stretch</var>
<br><a href="https://developer.mozilla.org/docs/CSS/align-items">-webkit-</a><a href="http://www.w3.org/TR/css3-flexbox/#align-items-property">align-items</a>:
<var>baseline</var>|
<var>center</var>|
<var>flex-end</var>|
<var>flex-start</var>|
<var class="initial">stretch</var>
<br><a href="http://www.w3.org/TR/css3-flexbox/#align-items-property">align-items</a>:
<var>baseline</var>|
<var>center</var>|
<var>flex-end</var>|
<var>flex-start</var>|
<var class="initial">stretch</var>
</code>
</div>
</div>
<div class="row">
<div class="span12">
<p>下面这些属性也会影响 flex 容器正交轴上当前行的对齐, 但是这些属性是作用在
<em>flex 容器内部的元素</em>, 可以覆盖 flex 容器的属性.</p>
</div>
</div>
<div class="row">
<div class="span11 offset1" style="background-color: #fcc; -webkit-align-self: center">
<code><a href="http://msdn.microsoft.com/library/ie/jj127301.aspx">-ms-</a><a href="http://www.w3.org/TR/2012/WD-css3-flexbox-20120322/#flex-align">flex-item-align</a>:
<var class="initial">auto</var>|
<var>baseline</var>|
<var>center</var>|
<var>end</var>|
<var>start</var>|
<var>stretch</var>
<br><a href="https://developer.mozilla.org/docs/CSS/align-self">-webkit-</a><a href="http://www.w3.org/TR/css3-flexbox/#align-items-property">align-self</a>:
<var class="initial">auto</var>|
<var>baseline</var>|
<var>center</var>|
<var>flex-end</var>|
<var>flex-start</var>|
<var>stretch</var>
<br><a href="http://www.w3.org/TR/css3-flexbox/#align-items-property">align-self</a>:
<var class="initial">auto</var>|
<var>baseline</var>|
<var>center</var>|
<var>flex-end</var>|
<var>flex-start</var>|
<var>stretch</var>
</code>
</div>
</div>
<div class="row">
<div class="span12">
<hr>
</div>
</div>
<div class="row">
<div class="span12">
<h3>正交轴(cross Axis)剩余空间分配</h3>
</div>
</div>
<div class="row">
<div class="span4">
<p>这些属性在正交方向有剩余空间的情况下将 flex 容器里的多个行进行对齐, 类似于
<code>justify-content</code> 和
<code>box/flex-pack</code> 在主轴方向对单个元素进行的对齐.
注意, 这些属性在 flexbox 内容只有一行时不会生效.</p>
</div>
<div class="span8" style="background-color: #fcc; -webkit-align-self: center">
<code><a href="http://msdn.microsoft.com/library/ie/jj127302.aspx">-ms-</a><a href="http://www.w3.org/TR/2012/WD-css3-flexbox-20120322/#flex-line-pack">flex-line-pack</a>:
<var>center</var>|
<var>distribute</var>|
<br>
<var>end</var>|
<var>justify</var>|
<var>start</var>|
<var class="initial">stretch</var>
<br><a href="https://developer.mozilla.org/docs/CSS/align-content">-webkit-</a><a href="http://www.w3.org/TR/css3-flexbox/#align-content-property">align-content</a>:
<var>center</var>|
<var>flex-end</var>|
<br>
<var>flex-start</var>|
<var>space-around</var>|
<var>space-between</var>|
<var class="initial">stretch</var>
<br><a href="http://www.w3.org/TR/css3-flexbox/#align-content-property">align-content</a>:
<var>center</var>|
<var>flex-end</var>|
<var>flex-start</var>|
<br>
<var>space-around</var>|
<var>space-between</var>|
<var class="initial">stretch</var>
</code>
</div>
</div>
</div>
</div>
</article>
<hr>
<nav aria-labelledby="pagination" class="pages" role="navigation">
<h3 id="pagination">Page Navigation</h3>
<div class="container">
<div class="row">
<div class="prev span5"><a href="http://ptb2.me/flexgrid/" rel="prev">ptb/flexgrid: a flexbox-based CSS grid in 3.6k</a>
</div>
<div class="page span2"></div>
<div class="next span5"></div>
</div>
</div>
</nav>
<hr>
</main>
<footer class="author vcard" itemprop="author" itemscope="" itemtype="http://schema.org/Person" role="contentinfo">
<div class="container">
<div class="row">
<div class="span12">
<p class="copyright">©
<time datetime="2014">2014</time>
<span class="fn n" itemprop="name" rel="author">
<span class="given-name" itemprop="givenName">Peter</span>
<span class="additional-name" itemprop="additionalName">T.</span>
<span class="family-name" itemprop="familyName">Bosse</span>
<span class="honorific-suffix" itemprop="honorificSuffix">II</span>
</span>,
<span class="role" itemprop="jobTitle">freelance web developer</span>for <a class="org" href="http://ptb2.me/" itemprop="affiliation">ptb2.me</a>. <a href="http://creativecommons.org/licenses/by-sa/3.0/us/" rel="license" title="Creative Commons Attribution-Share Alike 3.0 U.S. License">Some rights reserved</a>.</p>
</div>
</div>
</div>
</footer>
<script defer>
(function(i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function() {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o), m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-5357793-4', 'ptb2.me');
ga('send', 'pageview');
</script>
</body>
</html>