flex布局的语法和案例

Flex 布局

欢迎访问我的博客,祝码农同胞们早日走上人生巅峰,迎娶白富美~~~

本文参考阮一峰老师的《Flex布局:语法篇》,在实践过程中,添加了一些案例,方便理解

详细参考Flex 布局教程:语法篇

一、Flex 布局是什么?

Flex 是 Flexible Box 的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为 Flex 布局。

1
2
3
4
> .box{
> display: flex;
> }
>

行内元素也可以使用 Flex 布局。

1
2
3
4
> .box{
> display: inline-flex;
> }
>

Webkit 内核的浏览器,必须加上-webkit前缀。

1
2
3
4
5
> .box{
> display: -webkit-flex; /* Safari */
> display: flex;
> }
>

注意,设为 Flex 布局以后,子元素的floatclearvertical-align属性将失效。

二、基本概念

采用 Flex 布局的元素,称为 Flex 容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称”项目”。

容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size

案例

当一个布局需要自适应或者,一边固定宽度,其他自适应的情况下,使用flex布局

当想要使用flex布局的时候,找到其父元素,给父元素的类添加display:flex即可,在固定宽度的位置固定宽度,其他需要自适应的兄弟元素,分配flex,意思就是父盒子总宽度 - 固定宽度为剩余总宽度,把剩余需要自适应的兄弟元素按照需要的比例去分配剩余总宽度,案例代码如下:

案例一:

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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flex布局1</title>
<style type="text/css">
/*
使用 flex 流程
1.设计 DOM 结构
2.将父盒子设置为伸缩盒子 display: flex;
3.固定一边宽度,另一边设置flex: 1;就实现了
*/
html, body {
height: 100%;
}
.root {
/*padding-left: 100px;*/
display: flex;
border: 2px solid #c0c0c0;
height: 100%;
}
.sidebar {
width: 100px;
background-color: yellow;
}
.content {
/*width: 100%;*/
flex: 1;
background-color: red;
}
</style>
</head>
<body>
<div class="root">
<div class="sidebar">

</div>
<div class="content">

</div>
</div>
</body>
</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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flex2</title>
<style type="text/css">
.container {
display: flex;
width: 400px;
height: 300px;
}
.item {
flex: 1;
/*每一项占一份*/
}
.item:nth-child(even) {
background-color: yellow;
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</body>
</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
// index.wxml
<view class="root">
<!-- 标签栏的页签 固定高度 -->
<view class="tabs">
<view class="item active">
<text>个性推荐</text>
</view>
<view class="item">
<text>歌单</text>
</view>
<view class="item">
<text>主播电台</text>
</view>
<view class="item">
<text>排行榜</text>
</view>
</view>
<!-- 内容区域 自适应高度 -->
<scroll-view class="content" scroll-y>
<swiper class="slide" autoplay indicator-dots>
<swiper-item>
<image src="../../images/slide.png"></image>
</swiper-item>
<swiper-item>
<image src="../../images/slide.png"></image>
</swiper-item>
<swiper-item>
<image src="../../images/slide.png"></image>
</swiper-item>
</swiper>
<view class="portals">
<view class="item">
<image src="../../images/04.png"></image>
<text>私人FM</text>
</view>
<view class="item">
<image src="../../images/05.png"></image>
<text>每日歌曲推荐</text>
</view>
<view class="item">
<image src="../../images/06.png"></image>
<text>云音乐新歌榜</text>
</view>
</view>
<view class="list">
<view class="title">
<text>推荐歌单</text>
</view>
<view class="inner">
<view class="item">
<image src="../../images/poster.jpg"></image>
<text>一生中最爱的是谁谁?</text>
</view>
<view class="item">
<image src="../../images/poster.jpg"></image>
<text>一生中最爱的是谁谁?</text>
</view>
<view class="item">
<image src="../../images/poster.jpg"></image>
<text>一生中最爱的是谁谁?</text>
</view>
<view class="item">
<image src="../../images/poster.jpg"></image>
<text>一生中最爱的是谁谁?</text>
</view>
<view class="item">
<image src="../../images/poster.jpg"></image>
<text>一生中最爱的是谁谁?</text>
</view>
<view class="item">
<image src="../../images/poster.jpg"></image>
<text>一生中最爱的是谁谁?</text>
</view>
</view>
</view>
</scroll-view>
<!-- 播放控制条条 固定高度 -->
<view class="player">
<view class="poster">
<image src="../../images/poster.jpg"></image>
</view>
<view class="info">
<text class="title">一生中最爱</text>
<text class="artist">谭咏麟</text>
</view>
<view class="controls">
<image src="../../images/01.png"></image>
<image src="../../images/02.png"></image>
<image src="../../images/03.png"></image>
</view>
</view>
</view>
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
// index.wxss
page {
height: 100%;
}

.root {
display: flex;
flex-direction: column;
height: 100%;
background-color: #f0f0f0;
}

.tabs {
display: flex;
background-color: pink;
}

.tabs .item {
flex: 1;
text-align: center;
font-size: 12px;
background-color: #222;
color: #ccc;
padding: 8px 0;
}

.tabs .item.active {
color: #fff;
border-bottom: 2px solid #e9232c;
}

.content {
flex: 1;
background-color: #111214;
color: #ccc;
overflow: hidden;
}

.slide image {
width: 100%;
height: 130px;
}

.portals {
display: flex;
margin-bottom: 15px;
}

.portals .item {
flex: 1;
}

.portals .item image {
width: 60px;
height: 60px;
display: block;
margin: 10px auto;
}

.portals .item text {
display: block;
font-size: 12px;
text-align: center;
}

.list .title {
margin: 5px 10px;
font-size: 14px;
}

.list .inner {
display: flex;
flex-wrap: wrap;
}


.list .inner .item {
width: 33.33333333%;
}

.list .inner .item image {
display: block;
width: 120px;
height: 120px;
margin: 0 auto;
}

.list .inner .item text {
font-size: 14px;
}

.player {
display: flex;
height: 50px;
background-color: #17181A;
}

.poster image {
width: 40px;
height: 40px;
margin: 5px;
}

.info {
flex: 1;
color: #888;
font-size: 14px;
margin: 5px;
}

.info .title{
display: block;
font-size: 16px;
color: #ccc;
}

.controls image {
width: 40px;
height: 40px;
margin: 5px 2px;
}
1
2
3
4
5
6
// index.json
{
"navigationBarTitleText": "Music Player",
"navigationBarBackgroundColor": "#333",
"navigationBarTextStyle": "white"
}

三、各种属性

  1. flex-direction调整主轴方向(默认为水平方向)
  2. justify-content调整主轴对齐
  3. align-items调整侧轴对齐(子元素可以使用align-self覆盖)
  4. flex-wrap控制是否换行
  5. align-content堆栈(由flex-wrap产生的独立行)对齐
  6. flex-flowflex-direction + flex-wrap的简写形式
  7. flex是子项目在主轴的缩放比例,不指定flex属性,则不参与伸缩分配
  8. order控制子项目的排列顺序,正序方式排序,从小到大

本文标题:flex布局的语法和案例

文章作者:王工头

发布时间:2019年01月17日 - 19:15:19

最后更新:2019年01月25日 - 12:29:27

原始链接:https://qqqww.com/flex布局的语法和案例/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

-------------本文结束感谢大佬们的阅读-------------