flex布局原理，常见的父项属性,flex布局子项常见属性，利用flex布局和float制作的有轮播图的携程旅行首页

flex布局原理

flex是flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。
注意：
1、当为父盒子设置为flex布局以后，子元素的float、clear、和vertical-align属性将失效。
2、伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
3、采用flex布局的元素，称为flex容器（flex container）,简称“容器”，它的所有子元素自动成为容器成员，称为flex项目（flex item），简称“项目”。
总结：通过给父盒子添加flex属性，来控制盒子的位置和排列方式。

常见的父项属性

• flex-direction:设置主轴的方向
  默认的主轴方向是x轴方向，水平向右，默认侧轴的方向就是y轴方向，主轴和侧轴的方向是会变化的，就看flex-direction设置谁为主轴，剩下的就是侧轴，而子元素就是跟着主轴来排列的。

• justify-content:设置主轴上的子元素排列方式

• flex-wrap:设置子元素是否换行

• align-items:设置侧轴上的子元素的排列方式（单行）

• align-content:设置侧轴上的子元素的排列方式（多行）
  注意：只能在有换行的情况下使用

• flex-flow:复合属性，相当于同时设置了flex-direction和flex-wrap

.flex-container {
  display: flex;
  flex-flow: row wrap;
}
1
2
3
4

flex布局子项常见属性

• flex属性定义子项目分配剩余空间，用flex来表示占多少份。

flex: 1;/*默认为0*/
1

• align-self 属性规定弹性容器内所选项目的对齐方式，该属性将覆盖容器的 align-items 属性所设置的默认对齐方式。

div{
   align-self: center
}
1
2
3

• order 属性规定 flex 项目的顺序.

<div class="flex-container">
  <div style="order: 3">1</div>
  <div style="order: 2">2</div>
  <div style="order: 4">3</div> 
  <div style="order: 1">4</div>
</div>
1
2
3
4
5
6

利用flex布局和float制作的有轮播图的携程旅行首页：

CSS部分代码：

body{
    max-width: 540px;
    min-width: 320px;
    font: normal 14px/1.5 Tahoma, "Lucida Grande", Verdana, "Microsoft Yahei", STXihei, hei;
    color: #000;
    background: #f2f2f2;
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
    margin:0 auto;
    height: 2000px;
}
/*搜索模块*/
.search{
    /*固定定位跟父级没关系，以屏幕为准*/
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    /*-webkit-transform: translateX(-50%);*//*兼容老版本*/
    /*如果有left值后面就需要跟着transform*/
    /*固定的盒子应该有高度*/
    width: 100%;
    max-width: 540px;
    height: 44px;
    display: flex;
    background-color: #F6F6F6;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    z-index: 998;
}
div{
    box-sizing: border-box;
}
a{
    text-decoration: none;
    color: #222;
}
ul{
    list-style: none;
}
.user{
    width: 44px;
    height: 44px;
    font-size: 12px;
    text-align: center;
    color: #2eaae0;
}
.user::before{
    content: "";
    display: block;
    width: 23px;
    height: 23px;
    background: url("../images/sprite1.png") no-repeat -59px -194px;
    background-size: 104px auto;
    margin: 2px auto;
}
.searchzuo{
    flex: 1;
    height: 26px;
    border: 1px solid #dcdc6f;
    margin: 7px 10px;
    border-radius: 5px;
    position: relative;
    font-size: 12px;
    color: #666666;
    line-height: 24px;
    /*行高应该减去两个边框*/
    padding-left: 25px;
    box-shadow: 0 2px 4px rgba(0,0,0,.2);
}
.searchzuo::before{
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    background: url("../images/sprite.png") no-repeat -59px -279px;
    background-size: 104px auto;
    position: absolute;
    top: 5px;
    left: 5px;
}
/*焦点图*/
#focus{
    margin-top: 45px;
    width: 100%;
    height: 120px;
    overflow: hidden;
    position: relative;
    left:0;
}
#focus li{
    width: 670px;
}
#focus img{
    width: 670px;
}
#focus #navDiv{
    /*开启绝对定位*/
    position: absolute;
    bottom: 5px;
    right: 0;
}
#focus #navDiv a{
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #cdcdcd;
    opacity: 0.5;
    /*兼容IE8的透明度*/
    filter: alpha(opacity=50);
}
#focus ul{
    list-style: none;
    width: 0;
    position: absolute;
    /*每向左移动540px，就会展示下一张图片*/
    left: 0;
    overflow: hidden;
}
#focus ul li{
    float: left;
}
#focus #navDiv a:hover{
    background-color: #67676d;
}
/*局部导航栏*/
.local-nav{
    height: 64px;
    background-color: white;
    border-radius: 8px;
    margin: 3px 4px;
    display: flex;
}
.local-nav li{
    flex: 1;
}
.local-nav a{
    display: flex;
    flex-direction: column;
    /*侧轴居中对齐*/
    align-items:center;
    font-size: 12px;
}
.local-nav li [class^="nav-ion"]{
    width: 32px;
    height: 32px;
    background-color: #ffada3;
    margin-top: 8px;
    background: url("../images/localnav_bg.png") no-repeat 0 0;
    background-size: 32px auto;
}
.local-nav li [class^="nav-ion-ion2"]{
    background-position: 0 -32px;
}
.local-nav li [class^="nav-ion-ion3"]{
    background-position: 0 -64px;
}
.local-nav li [class^="nav-ion-ion4"]{
    background-position: 0 -96px;
}
.local-nav li [class^="nav-ion-ion5"]{
    background-position: 0 -128px;
}
/*主导航栏*/
nav{
    overflow: hidden;
    border-radius: 8px;
    margin: 0 4px 3px;
}
.nav-common{
    height: 88px;
    background-color: #e8ab4e;
    display: flex;
}
.nav-common:nth-child(2){
    margin: 3px 0;
}
.nav-items{
    flex: 1;
    display: flex;
    flex-direction: column;
}
/*前两个*/
.nav-items:nth-child(-n+2){
    border-right: 1px solid #FFFFFF;
}
.nav-items>a{
    flex: 1;
    text-align: center;
    line-height: 44px;
    text-shadow: 1px 1px rgba(0,0,0,.2);
    color: #FFFFFF;
}
.nav-items>a:nth-child(2){
    border-top: 1px solid #FFFFFF;
}
/*背景图片设置*/
.nav-common:nth-child(1) .nav-items:nth-child(1) a{
    background: url("../images/hotel.png") no-repeat bottom center;
    background-size: 121px auto;
}
.nav-common:nth-child(2) .nav-items:nth-child(1) a{
    background: url("../images/sprite.png") no-repeat 55px -810px;
}
.nav-common:nth-child(3) .nav-items:nth-child(1) a{
    background: url("../images/sprite.png") no-repeat 55px -650px;
}
/*背景线性渐变，必须添加浏览器私有前缀*/
.nav-common:nth-child(1){
    background: -webkit-linear-gradient(left,#FA5A55,#FA994D);
}
.nav-common:nth-child(2){
    background: -webkit-linear-gradient(left,#4B90ED,#53BCED);
}
.nav-common:nth-child(3){
    background: -webkit-linear-gradient(left,#34C2A9,#6CD559);
}
/*侧导航栏*/
.subnav-entry{
    border-radius: 8px;
    background-color: #FFFFFF;
    margin: 0 4px;
    display: flex;
    flex-wrap: wrap;
    padding: 5px 0;
    box-shadow: 1px 1px rgba(0,0,0,.2);
}
.subnav-entry li{
    /*里面的子孩子可以写百分比*/
    flex: 20%;
}
.subnav-entry li a{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.subnav-entry-icon{
    background-color: #ffada3;
    width: 28px;
    height: 28px;
    margin-top: 4px;
    background: url("../images/subnav-bg.png") no-repeat;
    background-size: 28px auto;
}
.subnav-entry li:nth-child(2) .subnav-entry-icon{
    background: url("../images/subnav-bg.png") no-repeat 0px -28px;
}
.subnav-entry li:nth-child(3) .subnav-entry-icon{
    background: url("../images/subnav-bg.png") no-repeat 0px -60px;
}
.subnav-entry li:nth-child(4) .subnav-entry-icon{
    background: url("../images/subnav-bg.png") no-repeat 0px -96px;
}
.subnav-entry li:nth-child(5) .subnav-entry-icon{
    background: url("../images/subnav-bg.png") no-repeat 0px -130px;
}
.subnav-entry li:nth-child(6) .subnav-entry-icon{
    background: url("../images/subnav-bg.png") no-repeat 0px -163px;
}
.subnav-entry li:nth-child(7) .subnav-entry-icon{
    background: url("../images/subnav-bg.png") no-repeat 0px -198px;
}
.subnav-entry li:nth-child(8) .subnav-entry-icon{
    background: url("../images/subnav-bg.png") no-repeat 0px -233px;
}
.subnav-entry li:nth-child(9) .subnav-entry-icon{
    background: url("../images/subnav-bg.png") no-repeat 0px -322px;
}
.subnav-entry li:nth-child(10) .subnav-entry-icon{
    background: url("../images/subnav-bg.png") no-repeat 0px -291px;
}
/*销售模块*/
.sales-box{
    border-top: 1px solid #bbb;
    background-color: #FFFFFF;
    margin: 4px;
}
.sales-hd{
    height: 44px;
    border-bottom: 1px solid #cccccc;
    position: relative;
}
.sales-hd h2{
    text-indent: -999px;
    overflow: hidden;
    position: relative;
    padding-bottom: 10px;
    line-height: 44px;
}
.sales-hd h2::after{
    position: absolute;
    top: 8px;
    left: 20px;
    content: "";
    width: 82px;
    height: 20px;
    background: url("../images/hot.png") no-repeat 0 -20px;
    background-size: 79px auto;
    top: 15px;
}
.more{
    position: absolute;
    right: 5px;
    top: 8px;
    background: -webkit-linear-gradient(left,#ff506c,#ff6bc6);
    border-radius: 8px;
    padding: 3px 20px 3px 10px;
    color: #FFFFFF;
}
.more::after{
    content: "";
    position: absolute;
    top: 9px;
    width: 7px;
    height: 7px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
}
.row{
    display: flex;
}
.row a{
    flex: 1;
    border-bottom: 1px solid #eee;
}
.row a:nth-child(1){
    border-right: 1px solid #eee;
}
.row a img{
    width: 100%;
}
/*底部模块*/
p{
    text-align: center;
    color: #aaa;
    font-size: 12px;
    line-height: 20px;
}
.footer .footer-nav{
    display: flex;
    background-color: #fff;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    box-shadow: 1px 1px rgba(0,0,0,.2);
}
.footer .footer-nav li{
    flex: 1;
}
.footer .footer-nav li a{
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.footer .footer-nav .i1{
    width: 32px;
    height: 32px;
    background: url("../images/sprite1.png") no-repeat -120px -307px;
    margin-bottom: 5px;
}
.footer .footer-nav .i2{
    width: 32px;
    height: 32px;
    background: url("../images/sprite1.png") no-repeat -120px -347px;
    margin-bottom: 5px;
}
.footer .footer-nav .i3{
    width: 35px;
    height: 35px;
    background: url("../images/sprite1.png") no-repeat -120px -620px;
    margin-bottom: 5px;
}
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