CSS-006-flex布局

flex

flex 出现之前如何布局

  • normal flow 正常流，文档流
  • float + clear
  • position relative + absolute
  • display:inline-block
  • margin 负值

flex基本概念

  • 水平方向叫做 main axis
    • 从左往右 main start -> main end
  • 垂直方向叫做 cross axis
    • 从上到下 cross start -> cross end

flex container 的属性

  • flex-direction 方向
    • row
    • row-reverse 水平方向反转
    • column 纵向排列
    • column-reverse 垂直方向反转
  • flex-wrap 换行
    • 子元素设置了宽度 200px但还是收缩的挤在一起， 父元素设置这个属性 flex-wrap:wrap 就会折行
  • flex-flow 上面两个的简写
  • justify-content 主轴方向对齐方式
    • space-between 两端对齐
    • space-around 拉手现象
    • flex-start
    • flex-end
    • center 缩在中间
  • align-items 侧轴对齐方式
    • stretch 把元素伸开，伸到最大元素的高度
    • flex-start 自身高度往上靠(收缩)
    • flex-end 自身高度往下靠(收缩)
    • baseline 文字基线对齐
    • center 垂直居中
  • align-content 多行/列内容对齐方式(用的少)

flex-item 属性

  • flex-grow 增长比例(空间过多时)
  • flex-shrink 收缩比例(空间不够时)
  • flex-basis 默认大小(一般不用)
  • flex 上面三个的缩写
    • flex: 1 2 100px; 增长的时候 1份，缩的时候 2份，原始占 100px
  • order 顺序(代替双飞翼)
  • align-self 自身的对齐方式
    • 比如 父元素设置了 align-items:flex-start 贴着顶部,你可以在某个子元素设置自己的对齐方式 align-self:center

实战

手机页面布局 (topbar + main + tabs)

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
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    * {margin:0;padding:0;box-sizing:border-box;}
    ul {list-style: none;}
    /*header和footer的高度都是100px，为什么不一样高？*/
    header {
        background: #ddd;
        border: 1px solid;
        height: 100px;
    }
    footer ul{
        background: #ddd;
        display: flex;
        height: 100px;
    }
    main {
        overflow: auto;
    }
    .container {
        display: flex;
        flex-direction: column;
        height: 100vh;
    }
    footer ul>li {
        height: 100%;
        width:25%;
        background: red;
    }
  </style>
</head>
<body>
  <div class="container">
    <header>
      header
    </header>
    <main>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
      <p>main</p>
    </main>
    <footer>
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
      </ul>
    </footer>
  </div>
</body>
</html>

产品列表 (ul>li*9)

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
<!DOCTYPE html>
<html>
<head>
  <style>
    *{margin:0;padding:0;border-box:box-sizing;}
    ul{list-style:none;}
    ul{
      display:flex;
      flex-wrap:wrap;
      margin:auto;
      border:1px solid black;
      width: 350px;
      justify-content:space-between;
    }
    
    li{
      height: 100px;
      width: 100px;
      border:1px solid red;
      margin:10px 0;
    }
    
    
  </style>
</head>
<body>
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
</body>
</html>

PC布局

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
<!DOCTYPE html>
<html>
<head>
  <style>
    *{margin:0;padding:0;border-box:box-sizing;}
    .content{
      display:flex;
    }
    
    .content>main{
      height: 400px;
      flex:1;
      background:red;
    }
    .content>aside{
      width:120px;
      background:blue;
    }
    .content>nav{
      width:100px;
      background:green;
    }
    
    header{background:grey;height:100px;}
    footer{background:grey;height:100px;}
    
  </style>
</head>
<body>
  <header></header>
  <div class="content">
    <aside></aside>
    <main></main>
    <nav></nav>
  </div>
  <footer></footer>
</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
<!DOCTYPE html>
<html>
<head>
  <style>
    *{margin:0;padding:0;border-box:box-sizing;}
    .parent{
      border:1px solid red;
      height:400px;
      display:flex;
      justify-content:center;
      align-items:center;
    }
    .child{
      border:1px solid red;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child">
      hahahaha 
      <br>
      hhh
      <br>
      hhh
    </div>
  </div>
</body>
</html>