-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
2210 lines (982 loc) · 190 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
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html class="theme-next muse use-motion" lang="zh-Hans">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta name="theme-color" content="#222">
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css" />
<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css" />
<link href="/css/main.css?v=5.1.4" rel="stylesheet" type="text/css" />
<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png?v=5.1.4">
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png?v=5.1.4">
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png?v=5.1.4">
<link rel="mask-icon" href="/images/logo.svg?v=5.1.4" color="#222">
<meta name="keywords" content="Hexo, NexT" />
<meta property="og:type" content="website">
<meta property="og:title" content="小笨熊的旅途">
<meta property="og:url" content="http://yoursite.com/index.html">
<meta property="og:site_name" content="小笨熊的旅途">
<meta property="og:locale" content="zh-Hans">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="小笨熊的旅途">
<script type="text/javascript" id="hexo.configurations">
var NexT = window.NexT || {};
var CONFIG = {
root: '/',
scheme: 'Muse',
version: '5.1.4',
sidebar: {"position":"left","display":"post","offset":12,"b2t":false,"scrollpercent":false,"onmobile":false},
fancybox: true,
tabs: true,
motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
duoshuo: {
userId: '0',
author: '博主'
},
algolia: {
applicationID: '',
apiKey: '',
indexName: '',
hits: {"per_page":10},
labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
}
};
</script>
<link rel="canonical" href="http://yoursite.com/"/>
<title>小笨熊的旅途</title>
</head>
<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">
<div class="container sidebar-position-left
page-home">
<div class="headband"></div>
<header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
<div class="header-inner"><div class="site-brand-wrapper">
<div class="site-meta ">
<div class="custom-logo-site-title">
<a href="/" class="brand" rel="start">
<span class="logo-line-before"><i></i></span>
<span class="site-title">小笨熊的旅途</span>
<span class="logo-line-after"><i></i></span>
</a>
</div>
<p class="site-subtitle"></p>
</div>
<div class="site-nav-toggle">
<button>
<span class="btn-bar"></span>
<span class="btn-bar"></span>
<span class="btn-bar"></span>
</button>
</div>
</div>
<nav class="site-nav">
<ul id="menu" class="menu">
<li class="menu-item menu-item-home">
<a href="/" rel="section">
<i class="menu-item-icon fa fa-fw fa-home"></i> <br />
首页
</a>
</li>
<li class="menu-item menu-item-archives">
<a href="/archives/" rel="section">
<i class="menu-item-icon fa fa-fw fa-archive"></i> <br />
归档
</a>
</li>
</ul>
</nav>
</div>
</header>
<main id="main" class="main">
<div class="main-inner">
<div class="content-wrap">
<div id="content" class="content">
<section id="posts" class="posts-expand">
<article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
<div class="post-block">
<link itemprop="mainEntityOfPage" href="http://yoursite.com/2018/09/16/双栏布局而已，这么多套路？/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="Hitobear">
<meta itemprop="description" content="">
<meta itemprop="image" content="/images/avatar.gif">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="小笨熊的旅途">
</span>
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2018/09/16/双栏布局而已，这么多套路？/" itemprop="url">双栏布局而已,这么多套路？</a></h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time title="创建于" itemprop="dateCreated datePublished" datetime="2018-09-16T22:42:59+08:00">
2018-09-16
</time>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<p> 一侧收缩，一侧自动填充的双栏布局不管在面试总还是工作中都是常遇到的布局问题，甚至有面试会问三种不同的方式如何来实现。。本来想说一个双栏布局嘛，不就是<code>float</code>和<code>margin-left</code>可以搞定了，不过既然人家问了，我肯定还是要答的，所以刻意做了总结，边总结边发现了一个新世界，区区的双栏布局，原来也是可以有不少套路的~</p>
<h2 id="利用浮动和流体布局实现双栏布局"><a href="#利用浮动和流体布局实现双栏布局" class="headerlink" title="利用浮动和流体布局实现双栏布局"></a>利用浮动和流体布局实现双栏布局</h2><p> 也许看到这种实现方式-浮动和流体布局会有点陌生，不过不要着急，这应该是大多数人最常使用的双栏布局的方式，没有之一了~只是这里打算从不同的角度来进行下分析~</p>
<h3 id="自适应宽度和流体布局"><a href="#自适应宽度和流体布局" class="headerlink" title="自适应宽度和流体布局"></a>自适应宽度和流体布局</h3><p> 首先遇到自适应宽度就会想到普通块级元素自由的流特性，即普通块级元素本身的<code>width+padding+border+margin</code>会自动填充父元素容器的宽度,那么既然双栏中的一栏要宽度自适应，是否可以利用普通块元素自身的流特性呢？</p>
<p> 答案当然是可以的，不过既然是双栏布局，一栏自适应填充父元素了，那另一栏岂不是要被挤到其它行了？不要忘了，我们有浮动元素啊，浮动元素允许块级元素和自己处于同一行，所以将另一个元素设为浮动元素就可以了。</p>
<h3 id="利用元素浮动实现块级元素同行排列"><a href="#利用元素浮动实现块级元素同行排列" class="headerlink" title="利用元素浮动实现块级元素同行排列"></a>利用元素浮动实现块级元素同行排列</h3><p> 最先，为了实现双列布局，我们使两个兄弟块级元素中的第一个元素浮动，代码如下：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><div class="container"></span><br><span class="line"> <div class="float"></span><br><span class="line"> 浮动元素</span><br><span class="line"> </div></span><br><span class="line"> <div class="main"></span><br><span class="line"> 自适应</span><br><span class="line"> </div></span><br><span class="line"></div></span><br><span class="line"></span><br><span class="line">//CSS</span><br><span class="line">.float{</span><br><span class="line"> height:100px;</span><br><span class="line"> float:left;</span><br><span class="line"> background:red;</span><br><span class="line"> opacity:0.3;</span><br><span class="line"> width:200px;</span><br><span class="line">}</span><br><span class="line">.main{</span><br><span class="line"> background:green;</span><br><span class="line"> height:100px;</span><br><span class="line">}</span><br><span class="line">.container{</span><br><span class="line"> width:500px;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p> 如上样式设置的效果如下图1所示</p>
<div text-align="center"><image src="http://p4a8bakov.bkt.clouddn.com/float1.png"></image></div><br><div text-align="center">图1</div>
<p> 可以看到，虽然看上去好像是双列布局，但是通过为左侧浮动元素的透明度可以看出，右侧元素的背景绿色也覆盖到了左侧的范围，说明，main元素并不是单纯的基于右侧的，它的起始位置还是从父元素的最左侧开始的，只是出于某种原因(和浮动元素的影响有关)它的文字内容被挤到了左侧浮动元素之外，但这并不是我们要的效果，我们需要的是单纯的左右布局的效果。</p>
<h3 id="通过margin-left与浮动元素在空间上彻底隔离"><a href="#通过margin-left与浮动元素在空间上彻底隔离" class="headerlink" title="通过margin-left与浮动元素在空间上彻底隔离"></a>通过margin-left与浮动元素在空间上彻底隔离</h3><p> 那么该如何做呢？其实只要基于以上效果做一点处理就好了，我们知道普通块级元素的流特性是它的<code>margin+border+padding+width</code>填充父元素怒的空间，那么这里只要把marin-left的宽度设置为左侧float元素的宽度，不就可以达到main既能自适应宽度，又会与float元素区域分离开来了吗？改良后的CSS和效果如下：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">.main{</span><br><span class="line"> background:green;</span><br><span class="line"> height:100px;</span><br><span class="line"> margin-left:200px;//设置为何左侧浮动元素等宽</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<div text-align="center"><image src="http://p4a8bakov.bkt.clouddn.com/float2_20180916131247.png"></image></div><br><div text-align="center">图2 真正的双列布局</div>
<h2 id="利用BFC来实现双列布局"><a href="#利用BFC来实现双列布局" class="headerlink" title="利用BFC来实现双列布局"></a>利用BFC来实现双列布局</h2><p> 不难发现,上节的利用浮动元素和margin-left实现的双列布局有一个限制条件是，一侧必须是固定宽度的，这样右侧自适应宽度的元素才能通过设置<code>margin-left</code>属性值来和左侧栏分离，那么如果不知道左侧的宽度，这时候不能单纯的依靠块级元素的流特性了，，有什么办法可以实现右侧自适应填充剩余宽度的效果吗？</p>
<p> 答案就是BFC了，什么？BFC不就是块级格式化上下文吗，和双列布局有什么关系吗，是的。。</p>
<p> 触发了BFC的元素能够使其子孙元素完全不影响到外界元素的的呈现，这也是为什么BFC元素不会发生margin合并，以及BFC元素有清除浮动的副作用，因为不管是产生magin合并，还是其子元素的浮动造成的父元素本身的高度塌陷均会影响到外界元素，与BFC的自身设定相违背了。。等等，不是在聊用BFC来实现双列布局吗，关margin合并，清除浮动什么事吗，不错，这里是不关margin合并的事，但是清除浮动是不是感觉很熟悉？这里要利用的正是BFC清除浮动的特性，既然我们要实现两栏布局，那么左侧浮动，右侧清除浮动，不是就可以了吗？</p>
<p> 触发BFC的属性有很多种，这里不做过多说明了，但我们选择一种副作用相对来说比较小的属性来触发BFC，即<code>overflow:hidden</code>,改良后的CSS如图所示:<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">.container{</span><br><span class="line"> width:500px;</span><br><span class="line">}</span><br><span class="line">.float{</span><br><span class="line"> height:200px;</span><br><span class="line"> background:red;</span><br><span class="line"> opacity:0.3;</span><br><span class="line"> float:left;</span><br><span class="line">}</span><br><span class="line">.main{</span><br><span class="line"> background:green;</span><br><span class="line"> height:200px;</span><br><span class="line"> overflow:hidden;//触发BFC</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p>
<div text-align="center"><image src="http://p4a8bakov.bkt.clouddn.com/float3_20180916220444.png"></image></div><br><div text-align="center">图3 利用BFC实现双栏布局</div>
<p> 可以看到，和上节的图2效果一样，实现了一个完全的双列布局，样式的核心点在于:</p>
<ol>
<li>将左侧栏设为左浮动，将自身高度塌陷，使得其它块级元素可以和它占据同一行的位置。</li>
<li>右侧栏为普通块级元素，利用自身的流特性填充整行空间。</li>
<li>右侧栏设置<code>overflow:hidden</code>触发BFC特性，使得自身和左侧的浮动元素分离开来，顺着浮动元素边缘形成自己的块级上下文区域。</li>
</ol>
<p> 可以看到其实这种实现方式和上一节的实现方式很像，都利用了左侧浮动，右侧为具有流特性的普通块级元素，不同的是本节中右侧元素同时触发了BFC，使得本身自动和浮动元素分离，也就无需像上例一样手动指定<code>margin-left</code>了。<br> 有点神奇吧，已经掌握两种实现双列布局的方式了，而且实现起来比较简单，只需设置几个CSS属性就好，并且接触到了浮动，BFC两个专业术语:)。。不过，不要着急，还有终极更简单神奇的杀手锏呢~</p>
<h2 id="flex实现双栏布局"><a href="#flex实现双栏布局" class="headerlink" title="flex实现双栏布局"></a>flex实现双栏布局</h2><p> flex布局总是平时听得多，但是自己用的少，所以常常忘了这种实现方式，但是还是不得不忽略的，因为flex布局实在太强大了，对于这种需求简直是小case了。。这里就单纯的贴下代码好啦</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">.contanier{</span><br><span class="line"> width:500px;</span><br><span class="line"> display:flex;</span><br><span class="line">}</span><br><span class="line">.float{</span><br><span class="line"> height:200px;</span><br><span class="line"> background:red;</span><br><span class="line"> opacity:0.3;</span><br><span class="line">}</span><br><span class="line">.main{</span><br><span class="line"> background:green;</span><br><span class="line"> height:200px;</span><br><span class="line"> flex-grow:1;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<div text-align="center"><image src="http://p4a8bakov.bkt.clouddn.com/flex1_20180916222810.pngg"></image></div><br><div text-align="center">图4 利用flex实现双栏布局</div>
<p> 可以看到,利用flex也可以实现在左侧宽度不确定的情况下，右侧自动填充剩余空间的双列布局，本方案的point只要记得，父元素设置为<code>display:flex</code>,自动填充空间的右侧元素设置属性<code>flex-grow:1</code>就可以啦，很简洁有木有，当然啦，有利有弊，弊端就是，考虑到兼容性可能就不那么友好了，毕竟<code>flex</code>这么高大上的属性不是每一个浏览器都是支持的~<br> 关于双栏布局的三种实现方式的总结就到这里啦，不过虽然这里只提到了双栏布局，但这三种方式的每一种都是可以延伸到三栏布局的，比如第一种，通过设置左右元素的左右浮动，第二种通过嵌套多层float+BFC块元素，第三种更简单，只需加一列就好了~哈哈，废话不多说了，可以实现一下~</p>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</div>
</article>
<article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
<div class="post-block">
<link itemprop="mainEntityOfPage" href="http://yoursite.com/2018/05/30/重新认识flex缩写属性—[flex]/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="Hitobear">
<meta itemprop="description" content="">
<meta itemprop="image" content="/images/avatar.gif">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="小笨熊的旅途">
</span>
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2018/05/30/重新认识flex缩写属性—[flex]/" itemprop="url">重新认识flex缩写属性—[flex]</a></h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time title="创建于" itemprop="dateCreated datePublished" datetime="2018-05-30T06:54:56+08:00">
2018-05-30
</time>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<h2 id="flex-1引发的疑惑"><a href="#flex-1引发的疑惑" class="headerlink" title="flex:1引发的疑惑"></a>flex:1引发的疑惑</h2><p>  flex是flex-grow,flex-shrink,flex-basis三个属性值的缩写，所以我也曾以为只是单纯缩写而已，没什么复杂的，直到看了flex:1能实现各子元素均分外层容器空间的效果：</p>
<div align="center"><image src="http://p4a8bakov.bkt.clouddn.com/flex17.png"></image></div><br><div align="center">图1</div>
<p>  html和css代码如下：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><div class="container"></span><br><span class="line"> <div class="inner">我是左侧的item</div></span><br><span class="line"> <div class="inner">我是右侧的item,我的内容比较多</div></span><br><span class="line"></div></span><br><span class="line"></span><br><span class="line">.container{</span><br><span class="line"> height:300px;</span><br><span class="line"> width:400px;</span><br><span class="line"> border:1px solid red;</span><br><span class="line"> display:flex;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> .inner{</span><br><span class="line"> border:1px solid black;</span><br><span class="line"> flex:1;</span><br><span class="line"> }</span><br></pre></td></tr></table></figure>
<p>  按照我最初的理解，flex:1相当于设置了flex-grow:1,flex-shrink:1(默认值),flex-basis:auto(默认值)，而如果对元素这样设置三个属性值的话，效果如下图2所示，明显是水平均分的，因为flex-grow为1只是表示均分多余的空间</p>
<div align="center"><image src="http://p4a8bakov.bkt.clouddn.com/flex18.png"></image></div><br><div align="center">图2</div>
<p>  那么问题来了，flex:1并不等价于flex-grow:1,flex-shrink:1(默认值),flex-basis:auto啊，说好的缩写呢？</p>
<h2 id="flex是缩写"><a href="#flex是缩写" class="headerlink" title="flex是缩写"></a>flex是缩写</h2><p>  flex是flex-grow,flex-shrink和flex-basis的缩写，flex属性值可以只指定一个属性的值，而另外的属性值采用各自在flex属性中的的初始值，但是有一点要注意的是：flex属性中flex-grow和flex-basis的初始值和它们原始的默认值不同，至于为什么不同，mdn中有明确的说过<code>这样的设计是为了让「flex」缩写在最常见的情景下比较好用。</code></p>
<h2 id="flex中对应各属性的初始值"><a href="#flex中对应各属性的初始值" class="headerlink" title="flex中对应各属性的初始值"></a>flex中对应各属性的初始值</h2><h3 id="flex-grow"><a href="#flex-grow" class="headerlink" title="flex-grow"></a>flex-grow</h3><p>  flex-grow用于设置各item项按对应比例划分剩余空间，若flex中没有指定flex-grow,则相当于设置了flex-grow:1</p>
<h3 id="flex-shrink"><a href="#flex-shrink" class="headerlink" title="flex-shrink"></a>flex-shrink</h3><p>  flex-shrink用于设置item的总和超出容器空间时，各item的收缩比例，若flex中没有指定flex-shrink,则等同于设置了flex-shrink:1</p>
<h3 id="flex-basis"><a href="#flex-basis" class="headerlink" title="flex-basis"></a>flex-basis</h3><p>  flex-basis用于设置各item项的伸缩基准值，可以取值为长度或百分比，如果flex中省略了该属性，则相当于设置了flex-basis:0.</p>
<h2 id="flex的不同取值"><a href="#flex的不同取值" class="headerlink" title="flex的不同取值"></a>flex的不同取值</h2><p>  flex的值的完整写法是[\<flex-grow> \<flex-shrink> \<flex-basis>],不过它的取值还有可能是单个数字或者单个百分比等，不同种类的取值所表示的意思是大有不同的。</flex-basis></flex-shrink></flex-grow></p>
<h3 id="flex值为none"><a href="#flex值为none" class="headerlink" title="flex值为none"></a>flex值为none</h3><p>  当flex为none时,等同于flex: 0 0 auto;</p>
<h3 id="flex值为auto"><a href="#flex值为auto" class="headerlink" title="flex值为auto"></a>flex值为auto</h3><p>  当flex为auto时，等同于flex: 1 1 auto;</p>
<h3 id="flex值为一个非负数字"><a href="#flex值为一个非负数字" class="headerlink" title="flex值为一个非负数字"></a>flex值为一个非负数字</h3><p>  当flex取值为一个数字，则该数字是设置的flex-grow值，其它两个属性用初始值，如flex:1时，等同于flex: 1 1 0%</p>
<h3 id="flex值为两个非负数字"><a href="#flex值为两个非负数字" class="headerlink" title="flex值为两个非负数字"></a>flex值为两个非负数字</h3><p>  当flex取值为2个数字时，相当于设置的flex-grow和flex-shrink值，flex-basis取值为初始值，如flex:1 0时，等同于flex: 1 0 0%</p>
<h3 id="flex值为一个数字和一个长度或百分比时"><a href="#flex值为一个数字和一个长度或百分比时" class="headerlink" title="flex值为一个数字和一个长度或百分比时"></a>flex值为一个数字和一个长度或百分比时</h3><p>  当flex取值为1个数字和1个长度或百分比时，设置的是flex-grow和flex-basis的值，flex-shrink值时初始值，如flex:1 20%,等同于flex: 1 1 20%</p>
<p>  原来一个简单的缩写属性flex是有这么多花样的~那么我不想背它的初始值，不同值对应的缩放属性等等，有这么多原因，以后是不是不用flex就可以了，光明正大用flex-grow,flex-shrink,flex-basis就好了？当然是可以了~不过用flex至少还是有它的好处的，比如说看上去简洁(一个flex属性能有这么多不同效果进而显得高大上),还有重要的一点，同样的一个单词能完成三个单词的工作，能使代码少啊:）</p>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</div>
</article>
<article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
<div class="post-block">
<link itemprop="mainEntityOfPage" href="http://yoursite.com/2018/05/29/进一步了解flex布局—来实现这些常见布局吧/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="Hitobear">
<meta itemprop="description" content="">
<meta itemprop="image" content="/images/avatar.gif">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="小笨熊的旅途">
</span>
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2018/05/29/进一步了解flex布局—来实现这些常见布局吧/" itemprop="url">进一步了解flex布局—来实现这些常见布局吧</a></h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time title="创建于" itemprop="dateCreated datePublished" datetime="2018-05-29T07:03:10+08:00">
2018-05-29
</time>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<p>  flex布局具有便捷、灵活的特点，熟练的运用flex布局能解决大部分布局问题，这里对一些常用布局场景做一些总结。</p>
<h2 id="web页面布局-topbar-main-footbar"><a href="#web页面布局-topbar-main-footbar" class="headerlink" title="web页面布局(topbar + main + footbar)"></a>web页面布局(topbar + main + footbar)</h2><h3 id="示例代码"><a href="#示例代码" class="headerlink" title="示例代码"></a>示例代码</h3><p>  要实现的效果如下：</p>
<div align="center"><image src="http://p4a8bakov.bkt.clouddn.com/flex11.png"></image></div><br><div align="center">图1</div>
<p>  html代码：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><div class="container"></span><br><span class="line"> <header>header...</header></span><br><span class="line"> <main>内容</main></span><br><span class="line"> <footer>footer...</footer></span><br><span class="line"></div></span><br></pre></td></tr></table></figure>
<p>  css代码：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">header{</span><br><span class="line"> height:100px;</span><br><span class="line"> background:#ccc;</span><br><span class="line">}</span><br><span class="line">footer{</span><br><span class="line"> height:100px;</span><br><span class="line"> background:#ccc;</span><br><span class="line">}</span><br><span class="line">.container{</span><br><span class="line"> display:flex;</span><br><span class="line"> flex-direction:column;</span><br><span class="line"> height:100vh;</span><br><span class="line">}</span><br><span class="line">main{</span><br><span class="line"> flex-grow:1;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h3 id="应用的flex属性"><a href="#应用的flex属性" class="headerlink" title="应用的flex属性"></a>应用的flex属性</h3><p>  本例中主要应用了以下flex属性：</p>
<ol>
<li>flex-direction:column 使整体布局从上到下排列</li>
<li>flex-grow:1, 应用于main，使得main自动填充剩余空间</li>
</ol>
<p>本例中应用以较少的css代码实现了传统的上中下页面布局，其中的关键通过flex-grow的使用避免了当main内容过少时footer部分会被提升到页面上方的问题(传统方式上可能需要靠绝对定位来解决了~)</p>
<h2 id="每行的项目数固定并自动换行的列表项"><a href="#每行的项目数固定并自动换行的列表项" class="headerlink" title="每行的项目数固定并自动换行的列表项"></a>每行的项目数固定并自动换行的列表项</h2><p>  要实现的效果如下：</p>
<div align="center"><image src="http://p4a8bakov.bkt.clouddn.com/flex12.png"></image></div><br><div align="center">图2</div>
<p>  html代码：</p>
<h3 id="示例代码-1"><a href="#示例代码-1" class="headerlink" title="示例代码"></a>示例代码</h3><p>  css代码：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">ul{</span><br><span class="line"> display:flex;</span><br><span class="line"> flex-wrap:wrap;</span><br><span class="line">}</span><br><span class="line">li{</span><br><span class="line"> list-style:none;</span><br><span class="line"> flex:0 0 25%;</span><br><span class="line"> background:#ddd;</span><br><span class="line"> height:100px;</span><br><span class="line"> border:1px solid red;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h3 id="应用的flex属性-1"><a href="#应用的flex属性-1" class="headerlink" title="应用的flex属性"></a>应用的flex属性</h3><p>  本例中主要应用了以下flex属性：</p>
<ol>
<li><p>flex:0 0 25%,相当于flex-basis:25%，使得每一个列表项的宽度占外层容器(本例中的ul元素)的25%，因此每行最多能够排开四个列表项。</p>
</li>
<li><p>flex-wrap:wrap,使得每行填满时会自动换行</p>
</li>
</ol>
<h2 id="实现自动划分多余空间的列表项"><a href="#实现自动划分多余空间的列表项" class="headerlink" title="实现自动划分多余空间的列表项"></a>实现自动划分多余空间的列表项</h2><p>  本例的效果和上例中的图2很相似，只是每行为3个固定宽度的列表项，并且各列表项之间留有相同宽度的空隙</p>
<div align="center"><image src="http://p4a8bakov.bkt.clouddn.com/flex13.png"></image></div><br><div align="center">图3</div>
<p>  传统方式上实现这种效果，不可避免的要用到负margin，那么现在来看了用flex实现的方式吧</p>
<h3 id="示例代码-2"><a href="#示例代码-2" class="headerlink" title="示例代码"></a>示例代码</h3><p>  css代码：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">ul{</span><br><span class="line"> display:flex;</span><br><span class="line"> flex-wrap:wrap;</span><br><span class="line"> justify-content:space-between;</span><br><span class="line"> border:1px solid black;</span><br><span class="line">}</span><br><span class="line">li{</span><br><span class="line"> list-style:none;</span><br><span class="line"> width:120px;</span><br><span class="line"> background:#ddd;</span><br><span class="line"> height:100px;</span><br><span class="line"> border:1px solid red;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h3 id="应用的flex属性-2"><a href="#应用的flex属性-2" class="headerlink" title="应用的flex属性"></a>应用的flex属性</h3><p>  本例中主要应用了以下flex属性：</p>
<ol>
<li>justify-content:space-between;使主轴方向的多余空间平均分配在两两item之间</li>
</ol>
<h2 id="平均分配空间的栅格布局"><a href="#平均分配空间的栅格布局" class="headerlink" title="平均分配空间的栅格布局"></a>平均分配空间的栅格布局</h2><p>  各大UI里栅格布局基本是必备的布局之一，平均分配布局又是栅格布局里最常用的布局，利用flex实现平均分配的栅格布局，关键之处就是利用它的自动收缩空间。</p>
<div align="center"><image src="http://p4a8bakov.bkt.clouddn.com/flex14.png"></image></div><br><div align="center">图4</div>
<h3 id="示例"><a href="#示例" class="headerlink" title="示例"></a>示例</h3><p>  html如下：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><div class="row"></span><br><span class="line"> <div class="column">column1</div></span><br><span class="line"> <div class="column">colum22</div></span><br><span class="line"> <div class="column">colum322</div></span><br><span class="line"></div></span><br></pre></td></tr></table></figure>
<p>  css如下：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">.row{</span><br><span class="line"> display:flex;</span><br><span class="line"> flex-wrap:wrap;</span><br><span class="line"> border:1px solid black;</span><br><span class="line">}</span><br><span class="line">.column{</span><br><span class="line"> list-style:none;</span><br><span class="line"> background:#ddd;</span><br><span class="line"> flex:1;</span><br><span class="line"> height:100px;</span><br><span class="line"> border:1px solid red;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h3 id="应用的flex属性-3"><a href="#应用的flex属性-3" class="headerlink" title="应用的flex属性"></a>应用的flex属性</h3><p>  本例中主要应用了以下flex属性：</p>
<ol>
<li>flex:1 这里针对item应用了flex:1,相当于flex:1 1 0%,而之所以不管各个column元素内容的宽度为多大，都能均分到相等的空间，正式因为相当于在设置了flex-grow:1使得剩余空间按相等比例自动分配的同时又设置了flex-basis:0%,才使得整个空间都平均分配了。</li>
</ol>
<h2 id="圣杯布局"><a href="#圣杯布局" class="headerlink" title="圣杯布局"></a>圣杯布局</h2><p>  传统的圣杯布局需要涉及绝对定位、浮动、负margin等几大最头疼属性，有了flex布局以后发现，原来这么简单的配方，也能实现这么复杂的效果哈~</p>
<div align="center"><image src="http://p4a8bakov.bkt.clouddn.com/flex15.png"></image></div><br><div align="center">图5 圣杯布局</div>
<h3 id="示例代码-3"><a href="#示例代码-3" class="headerlink" title="示例代码"></a>示例代码</h3><p>  html代码：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><div class="container"></span><br><span class="line"> <main>main</main></span><br><span class="line"> <aside>aside</aside></span><br><span class="line"> </span><br><span class="line"> <nav>nav</nav></span><br><span class="line"></div></span><br></pre></td></tr></table></figure>
<p>  css代码：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">.container{</span><br><span class="line"> display:flex;</span><br><span class="line"> height:100vh;</span><br><span class="line">}</span><br><span class="line">aside{</span><br><span class="line"> width:50px;</span><br><span class="line"> background:#ccc;</span><br><span class="line">}</span><br><span class="line">main{</span><br><span class="line"> flex-grow:1;</span><br><span class="line"> background:#def;</span><br><span class="line">}</span><br><span class="line">nav{</span><br><span class="line"> width:80px;</span><br><span class="line"> background:#ccc;</span><br><span class="line"> order:-1;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h3 id="应用的flex属性-4"><a href="#应用的flex属性-4" class="headerlink" title="应用的flex属性"></a>应用的flex属性</h3><ol>
<li>对main用flex-grow:1,使得中间主元素空间自动扩充</li>
<li>对nav应用order:-1,使得order处于最左侧(html中main写在了最前，以利于优先加载主内容区)</li>
</ol>
<h2 id="元素水平垂直居中"><a href="#元素水平垂直居中" class="headerlink" title="元素水平垂直居中"></a>元素水平垂直居中</h2><p>  如何让一个元素同时水平垂直居中？答案很多样也很复杂，但是在这么多样化得答案中flex绝对是最简单的一种了~</p>
<div align="center"><image src="http://p4a8bakov.bkt.clouddn.com/flex16.png"></image></div><br><div align="center">图6 水平垂直居中</div>
<h3 id="示例代码-4"><a href="#示例代码-4" class="headerlink" title="示例代码"></a>示例代码</h3><p>  html代码：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><div class="container"></span><br><span class="line"> <div class="inner">我是中间的内容</div></span><br><span class="line"></div></span><br></pre></td></tr></table></figure>
<p>  css代码：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">.container{</span><br><span class="line"> height:300px;</span><br><span class="line"> width:300px;</span><br><span class="line"> border:1px solid red;</span><br><span class="line"> display:flex;</span><br><span class="line"> justify-content:center;</span><br><span class="line"> align-items:center;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">.inner{</span><br><span class="line"> border:1px solid black;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h3 id="应用的flex属性-5"><a href="#应用的flex属性-5" class="headerlink" title="应用的flex属性"></a>应用的flex属性</h3><ol>
<li>justify-content:center;使item元素水平居中</li>
<li>align-items:center;使item元素垂直居中</li>
</ol>
<p>  这么多场景都难不倒flex有木有，果然名不虚传~(  想更详细的了解flex相关属性的话，请戳<a href="https://juejin.im/post/5b0d6eab6fb9a009ea104bdd" target="_blank" rel="noopener">flex入门—了解这些flex属性</a>~)</p>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</div>
</article>
<article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
<div class="post-block">
<link itemprop="mainEntityOfPage" href="http://yoursite.com/2018/05/24/flex入门—了解这些flex属性/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="Hitobear">
<meta itemprop="description" content="">
<meta itemprop="image" content="/images/avatar.gif">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="小笨熊的旅途">
</span>
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2018/05/24/flex入门—了解这些flex属性/" itemprop="url">flex入门—了解这些flex属性</a></h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time title="创建于" itemprop="dateCreated datePublished" datetime="2018-05-24T07:13:39+08:00">
2018-05-24
</time>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<h2 id="传统的页面布局"><a href="#传统的页面布局" class="headerlink" title="传统的页面布局"></a>传统的页面布局</h2><p>  在flex出现之前，双列布局，三列布局，动态盒居中,绝对居中布局等常见的布局均是采用dispaly+float+定位来布局的，一般包括以下几种布局策略：</p>
<ol>
<li>normal flow(文档流:块级元素从上到下，行内元素从左到右)</li>
<li>float + clear</li>
<li>position relative + absolute</li>
<li>display inline-block</li>
<li>负margin(扩大宽度，产生位移，如一行里的多个column)</li>
</ol>
<h2 id="flex来了"><a href="#flex来了" class="headerlink" title="flex来了"></a>flex来了</h2><p>  flex-即flexible,弹性的，灵活的，又叫弹性盒布局(flexible box layout)，这种布局方式主要有以下特点：</p>
<ol>
<li>块级布局侧重垂直方向，行内布局侧重水平方向，而flex是与方向无关的(来源于后续提到的一个重要属性flex-direction)</li>
<li>flex布局可以实现空间自动分配、自动对齐(弹性灵活的体现，与后续提到的flex-grow,flex-shrink，flex-basis属性有很大关系)</li>
<li>flex适用于简单的线性布局(左右或上下布局)，更复杂的布局需要用grid布局(如瀑布流布局)<h2 id="基本概念"><a href="#基本概念" class="headerlink" title="基本概念"></a>基本概念</h2><div align="center"><image src="http://p4a8bakov.bkt.clouddn.com/flex0.png"></image></div>
</li>
</ol>
<p>  关于flex布局中，有以下几个基本常识值得注意：</p>
<ol>
<li>如图所示flex布局中有两条轴线贯穿了外层容器，分别为主轴和侧轴(这里主轴不一定是水平方向的轴线，具体有flex-direction而定，即主轴和侧轴的方向是不一定的，也印证了flex布局是方向无关的)</li>
<li>主轴的尺寸为main size,侧轴的尺寸为cross size</li>
<li>主轴的起点和终点分别为main start和main end,对应的侧轴的起点和终点分别为cross start和cross end</li>
<li>应用了<code>display:flex</code>属性的元素叫做 flex container，即flex容器，它里面的子元素叫做flex item</li>
<li>flex 容器的<code>宽度总是自动扩张到最大值</code>(注意是宽度，不管主轴是哪个方向，它的宽度总是会扩张到最大值,即使这个容器元素是行内元素如span,而子元素的宽度受多个属性影响，如flex-direction,align-items,flex-grow等，有时候看起来容器元素的宽度并不等于item元素宽度的和，如下图2所示)</li>
<li>flex 容器内的子元素即flex-item在不指定height,width的情况下总是自动收缩的(height本来就自动收缩，但当父元素display:flex后，这些子元素的宽度也都自动收缩，而没有了原本块级元素在宽度上自动扩张的特性)，同样的，这里<code>不区分主轴的方向，height,width总是自动收缩</code></li>
<li>display:flex以后 float,clear,vertical-align等属性均失效</li>
</ol>
<h2 id="flex-container的六大属性"><a href="#flex-container的六大属性" class="headerlink" title="flex container的六大属性"></a>flex container的六大属性</h2><h3 id="flex-direction—方向"><a href="#flex-direction—方向" class="headerlink" title="flex-direction—方向"></a>flex-direction—方向</h3><p>  flex-direction 指定了子元素排列的方式，可以为row(按行展示)/column(按列展示)/inherit/row-reverse/column-reverse</p>
<p>例1. 当flex-direction为row时，显示效果如下：</p>
<div align="center"><image src="http://p4a8bakov.bkt.clouddn.com/image/css/2018/05/25flex2.png"></image></div><br><div align="center">图2</div>
<p>其中html和css代码如下：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><div class="container"></span><br><span class="line"> <div class="item">item1</div></span><br><span class="line"> <div class="item">item2</div></span><br><span class="line"></div></span><br><span class="line"></span><br><span class="line">.container{</span><br><span class="line"> display:flex;</span><br><span class="line"> border:1px solid red;</span><br><span class="line"> height:300px;</span><br><span class="line">}</span><br><span class="line">.item{</span><br><span class="line"> border:1px solid black;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>例2.当为.container添加flex-direction:cloumn属性后，排列效果如下：</p>
<div align="center"><image src="http://p4a8bakov.bkt.clouddn.com/image/css/2018/05/25flex1.png"></image></div><br><div align="center">图3</div>
<p>  图2，图3中的flex-item都没有指定width和height值，但我们通过border可以看到看到，图2中的垂直方向的空间自动填满了container的宽度，即container此时在主轴方向的长度，图3中的水平方向的空间自动填满了container的高度，同样的，这也是container此时在侧轴方向的长度，这个现在和后续提到的<code>align-items</code>有关，不过我们暂时可以做出如下总结：<br>默认情况下，flex-item元素在其侧轴方向的长度总是自动扩张的(当然，后续会知道，只是默认情况，稍微改变align-items属性值，表现就会不一样~)</p>
<h3 id="flex-wrap"><a href="#flex-wrap" class="headerlink" title="flex-wrap"></a>flex-wrap</h3><p>  用于控制是否可以换行(按row排列时)/列(按column排列时)，当flex-wrap是nowrap时，所有items总是自动缩小而不会换行(列)</p>
<h3 id="flex-flow"><a href="#flex-flow" class="headerlink" title="flex-flow"></a>flex-flow</h3><p>  flex-direction和flex-wrap的缩写，如flex:row wrap实际上同时设置了 flex-direction:row和flex-wrap:wrap;</p>
<h3 id="justify-content"><a href="#justify-content" class="headerlink" title="justify-content"></a>justify-content</h3><p>  主轴方向的对齐方式，可取:flex-start/flex-end/center/space-around/space-between,默认为flex-start</p>
<h3 id="align-items"><a href="#align-items" class="headerlink" title="align-items"></a>align-items</h3><p>  侧轴方向的对齐方式，可取：flex-start/flex-end/center/stretch/baseline,默认为stretch(填满父空间,<code>前提是不指定height值,当指定了height值时，会以该值为主</code>),也就是之前提到的<code>默认情况下，flex-item元素在其侧轴方向的长度总是自动扩张的</code></p>
<h4 id="align-itmes-stretch和height同时存在时"><a href="#align-itmes-stretch和height同时存在时" class="headerlink" title="align-itmes:stretch和height同时存在时"></a>align-itmes:stretch和height同时存在时</h4><p>  为了测试指定height时，align-items：stretch还是否会对元素项产生效果，进行了以下测试：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"> <div class="outer"></span><br><span class="line"> <div>item1</div></span><br><span class="line"> <div>item2</div></span><br><span class="line"> <div>item3</div></span><br><span class="line"> <div>item4</div></span><br><span class="line"></div></span><br><span class="line"></span><br><span class="line">.outer{</span><br><span class="line"> align-items:stretch;</span><br><span class="line">}</span><br><span class="line">.outer div:nth-child(1){</span><br><span class="line"> height:200px;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<div align="center"><image src="http://p4a8bakov.bkt.clouddn.com/flex9.png"></image></div>
<p>  如图所示，由于align-items是stretch(也是默认值),所以除item1元素外的所有元素在侧轴方向都自动拉伸到最大了，而item1之所以没有自动拉伸，是因为对其显示设置了高度，此时可以理解为height属性的优先级要更高。</p>
<h3 id="align-content"><a href="#align-content" class="headerlink" title="align-content"></a>align-content</h3><p>  align-content属性和justify-content，align-items是类似的，都是控制item元素之间的摆放方式，只是该属性只有在主轴方向上有多个轴线时才有效，如flex-direction是row时，如果item有换行则align-cnotent属性值有效，当flex-direction是clolumn时，如果item有换列，则align-content有效，其中属性值可以取flex-start/flex-end/center/space-around/space-between/stretch</p>
<blockquote>
<p>注意：justify-content是用于控制属于不同的主轴线(可以想象为平行与主轴线)的元素在侧轴方向的的排列方式，其属性值包含space-around/space-between，没有stretch,而align-items是用于控制单个元素在侧轴方向的摆放的，其属性值包含stretch,不含space-around/space-between，align-content则用于控制当同一个侧轴有多个元素时，这些元素之间的摆放方式，它们即可取space-around/space-between，又可取stretch(当每一个侧轴都只穿过一个元素时(即没有多个主轴线，没换行/列)，该属性失效)</p>
</blockquote>
<h4 id="align-content和align-items属性同时指定时"><a href="#align-content和align-items属性同时指定时" class="headerlink" title="align-content和align-items属性同时指定时"></a>align-content和align-items属性同时指定时</h4><p>  以flex-direction:row时为例，当item有多行时，align-content和align-items是同时有效的，align-content控制行于行之间的排列关系，align-items控制元素在一行中的位置，可以看下以下例子：</p>
<p>html和css部分如下：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"> <div class="outer"></span><br><span class="line"> <div>item1</div></span><br><span class="line"> <div>item2</div></span><br><span class="line"> <div>item3</div></span><br><span class="line"> <div>item4</div></span><br><span class="line"> </div></span><br><span class="line"></span><br><span class="line">.outer{</span><br><span class="line"> display:flex;</span><br><span class="line"> border:1px solid red;</span><br><span class="line"> height:300px;</span><br><span class="line"> align-items:center;</span><br><span class="line"> flex-wrap:wrap;</span><br><span class="line"> align-content:flex-end;</span><br><span class="line">}</span><br><span class="line">.outer div{</span><br><span class="line"> width:200px;</span><br><span class="line"> border:1px solid black;</span><br><span class="line">}</span><br><span class="line">.outer div:nth-child(1){</span><br><span class="line"> height:200px;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>效果如下所示：</p>
<div align="center"><image src="http://p4a8bakov.bkt.clouddn.com/flex4.jpg"></image></div><br><div align="center">图4</div>
<p>  可以看到，现在item1和item2是处于一行的，item3和item4是处于一行的，由于align-content是flex-end,所以所有行依次排列在侧轴的终点处，同时由于align-items为center，所以item2处于它所在行的垂直方向的中点处(<strong>原来并非相对于它的父元素垂直居中，而是相对于它所在的行垂直居中</strong>)</p>
<p>  接下来，再看一下把align-items:center去掉的效果</p>
<div align="center"><image src="http://p4a8bakov.bkt.clouddn.com/flex5.png"></image></div><br><div align="center">图5</div>
<p>  如图5所示，和刚才不同的是，item2在没有指定高度的情况下自动拉伸为何item1的高度(指定了200px)一样了，其实还是因为align-items的效果，它虽然没有显示指定，但它的默认值是stretch，所以在它所处的行中在垂直方向自动拉伸了。</p>
<p>  所以，当align-content有效时，不要以为align-items就无效了，只是它们的作用不同而已，一个控制不同行元素相对于父元素(flex-container)的排列方式，一个用于控制元素在所处行中的垂直方向的位置(这里指的flex-direction为row,flex-direction为column时请自行推算~)</p>
<h2 id="flex-item的六大属性"><a href="#flex-item的六大属性" class="headerlink" title="flex item的六大属性"></a>flex item的六大属性</h2><h3 id="flex-grow-多余空间自动分配比例"><a href="#flex-grow-多余空间自动分配比例" class="headerlink" title="flex-grow:多余空间自动分配比例"></a>flex-grow:多余空间自动分配比例</h3><p>  用于控制当主轴方向空间过多时，元素在主轴方向的长度自动增加；如果多个元素同时指定了flex-grow，则<code>多余的空间</code>会按照各自flex-grow值的比例<code>自动分配</code></p>
<blockquote>
<p>默认值：0</p>
</blockquote>
<h3 id="flex-shrink-超出空间自动收缩比例"><a href="#flex-shrink-超出空间自动收缩比例" class="headerlink" title="flex-shrink:超出空间自动收缩比例"></a>flex-shrink:超出空间自动收缩比例</h3><p>  当主轴方向空间不够时，使元素在主轴方向的长度自动收缩(即使为元素项设置了显示宽度width值，依然会根据需要自动收缩，不同于之前container中的align-items属性值stretch会低于height的优先级)，以使得总长度能够适应container的长度(当应用了flex-wrap:wrap时，一般是不会自动收缩的，因为这时候自动换行/列了，不会空间不够)</p>
<blockquote>
<p>默认值：1</p>
</blockquote>
<h4 id="flex-shrink和flex-wrap配合使用"><a href="#flex-shrink和flex-wrap配合使用" class="headerlink" title="flex-shrink和flex-wrap配合使用"></a>flex-shrink和flex-wrap配合使用</h4><p>  flex-shrink的概念已经明了，看上去功能比较单一，不过不同的属性值之间的搭配还是会带来很多样化得效果的，尤其是这里就来看一下flex-shrink和flex-wrap的配合使用。</p>
<h5 id="flex-shrink-0和flex-wrap-nowrap"><a href="#flex-shrink-0和flex-wrap-nowrap" class="headerlink" title="flex-shrink:0和flex-wrap:nowrap"></a>flex-shrink:0和flex-wrap:nowrap</h5><p>  下面看一下flex-shrink为0并且container没有设置flex-wrap属性时的效果:</p>
<p>  html和css如下：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"> <div class="outer"></span><br><span class="line"> <div>item1</div></span><br><span class="line"> <div>item2</div></span><br><span class="line"> <div>item3</div></span><br><span class="line"> <div>item4</div></span><br><span class="line"> </div></span><br><span class="line"></span><br><span class="line">.outer{</span><br><span class="line"> display:flex;</span><br><span class="line"> border:1px solid red;</span><br><span class="line"> height:300px;</span><br><span class="line"> align-content:flex-end;</span><br><span class="line">}</span><br><span class="line">.outer div{</span><br><span class="line"> width:150px;</span><br><span class="line"> </span><br><span class="line"> border:1px solid black;</span><br><span class="line"> flex-shrink:0;</span><br><span class="line">}</span><br><span class="line">.outer div:nth-child(1){</span><br><span class="line"> height:200px;</span><br><span class="line">}</span><br><span class="line">.outer div:nth-child(2){</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<div align="center"><image src="http://p4a8bakov.bkt.clouddn.com/flex6.png"></image></div><br><div align="center">图6</div>
<p>  如上图所示，当设置item的flex-shrink为0时，说明子元素项不会自动收缩，造成的结果就是所有元素项按自身原本的尺寸依次排列，可能会有主轴上总长度超出container在该放向的长度的可能。</p>
<h5 id="flex-shrink-1和flex-wrap-nowrap"><a href="#flex-shrink-1和flex-wrap-nowrap" class="headerlink" title="flex-shrink:1和flex-wrap:nowrap"></a>flex-shrink:1和flex-wrap:nowrap</h5><p>  接下来，将css中设置的flex-shrink:0去掉(等同于设置了flex-shrink:1,因为这是默认值)，此时效果如下：</p>
<div align="center"><image src="http://p4a8bakov.bkt.clouddn.com/flex7.png"></image></div><br><div align="center">图7</div>
<p>  如上图所示，此时，各子元素项的宽度(在主轴方向的长度)明显收缩了(小于为其设置的width:150px)，这就是因为默认的flex-shrink:1使得超出的部分均分在了所有子元素项的宽度上。</p>
<h5 id="flex-shrink-1和flex-wrap-wrap"><a href="#flex-shrink-1和flex-wrap-wrap" class="headerlink" title="flex-shrink:1和flex-wrap:wrap"></a>flex-shrink:1和flex-wrap:wrap</h5><p>  最后，再为container添加flex-wrap:wrap看下是否又会有什么不同呢？</p>
<div align="center"><image src="http://p4a8bakov.bkt.clouddn.com/flex8.png"></image></div><br><div align="center">图8</div>
<p>  如图8所示，此时子元素项懂得在合适的位置自动换行了，因此也就不存在宽度超出父元素宽度范围的情况了，所以即使设置了flex-shrink也不会出现长度收缩了~</p>
<h3 id="flex-basis-原始大小"><a href="#flex-basis-原始大小" class="headerlink" title="flex-basis 原始大小"></a>flex-basis 原始大小</h3><p>  我们都知道为container设置了display:flex后，子元素项的宽度正是恰好包裹自身内容的宽度，相当于是自动的，设置flex-basis后则类似于设置了width值，可以显示指定宽度，取值可以为绝对单位或是百分比(可用于栅格效果)</p>
<blockquote>
<p>默认值：auto</p>
</blockquote>
<h3 id="flex-缩写"><a href="#flex-缩写" class="headerlink" title="flex 缩写"></a>flex 缩写</h3><p>  flex属性即为flex-grow,flex-shrink,flex-basis三个属性的缩写</p>
<h3 id="order-指定次序"><a href="#order-指定次序" class="headerlink" title="order 指定次序"></a>order 指定次序</h3><p>  order用于指定子元素项在兄弟元素中排列的顺序，应用该属性可以简单的实现双飞翼布局</p>
<h3 id="align-self-自身的对齐方式-特殊化自身元素"><a href="#align-self-自身的对齐方式-特殊化自身元素" class="headerlink" title="align-self 自身的对齐方式(特殊化自身元素)"></a>align-self 自身的对齐方式(特殊化自身元素)</h3><p>  align-self指定元素自身在侧轴上的对齐方式，可以用来<code>覆盖align-items属性的值对自身设置的效果</code>。</p>
<div align="center"><image src="http://p4a8bakov.bkt.clouddn.com/flex10.png"></image></div><br><div align="center">图9</div>
<p>  如图9所示，当align-items为stretch，item1的align-slef为center时，除item1外的所有元素在侧轴方向的对齐方式都是自动延伸的，而item1元素因为应用了align-slef:center,明显是垂直居中的。</p>
<p>  想了解不同布局的flex实现方式的话，请戳<a href="https://juejin.im/post/5b0d6ca76fb9a009fd0e9329" target="_blank" rel="noopener">进一步了解flex布局—来实现这些常见布局吧</a>~</p>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</div>
</article>
<article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
<div class="post-block">
<link itemprop="mainEntityOfPage" href="http://yoursite.com/2018/04/10/立即执行函数和闭包/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="Hitobear">
<meta itemprop="description" content="">
<meta itemprop="image" content="/images/avatar.gif">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="小笨熊的旅途">
</span>
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2018/04/10/立即执行函数和闭包/" itemprop="url">立即执行函数和闭包再总结</a></h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time title="创建于" itemprop="dateCreated datePublished" datetime="2018-04-10T22:40:42+08:00">
2018-04-10
</time>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<p>  我们常常听到别人问:什么是立即执行函数？什么是闭包？它们有什么联系？它们的作用是什么？最近刚好对这个问题有些思考，这里就做一下下总结</p>
<h2 id="立即执行函数"><a href="#立即执行函数" class="headerlink" title="立即执行函数"></a>立即执行函数</h2><p>  要说什么是立即函数，顾名思义，立即执行的函数呗，那么为什么要用立即执行函数呢？这就要从一个老生常谈的问题说起了</p>
<h3 id="变量污染"><a href="#变量污染" class="headerlink" title="变量污染"></a>变量污染</h3><p>  我们知道，所有在函数外定义的变量都是全局变量，而全局变量多了，难免不出现一不小心被覆盖的问题，尤其是在多人合作开发的项目中，可以想象每个人在写自己的模块的代码时都定义一堆全局变量，一旦出现被覆盖的问题，极有可能引发大的bug<br>  那么，怎么解决全局变量带来的变量污染的问题呢？简单啦，不用全局变量就可以啦 </p>
<h3 id="局部变量替代全局变量"><a href="#局部变量替代全局变量" class="headerlink" title="局部变量替代全局变量"></a>局部变量替代全局变量</h3><p>  为了杜绝变量污染，我们选择抛弃全局变量，而只用局部变量，而ES5中，只有函数中用var 声明的变量才是局部变量，(ES6中{},新增了块级作用域，代码块中用let定义的变量也是局部变量，但这里为了通用，不考虑ES6),所以我们必须将所有变量的初始化和赋值都在函数作用域内进行。</p>