如何使用flex实现自适应后台管理系统的布局

1.什么是flex

Flex 布局,可以简便、完整、响应式地实现各种页面布局。

我这里已假设你已经学过flex布局了,要是想要再学习一遍,可以参考阮一峰的文章(http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html)。

2.用flex布局一个自适应的后台管理系统

flex布局从传统上已放弃用position定位布局,那些采用了flex布局并且同时还采用了position布局的同学,很多程度上是因为对flex布局还不够理解,接下来,我将带大家应用flex布局做一个自适应的后台管理系统。

我们将用的flex属性有:

  • flex :是flex-grow,flex-shrink,flex-basis的简写。例如:flex:1 1 auto,这个的意思是允许放大,允许缩小,宽度为本来大小。还有一种简写为flex:1,其实就是flex:1 1 0%的意思。
  • flex-direction :决定主轴方向属性。
  • flex-grow :定义项目的放大比例,默认为0不放大。如果只有一个元素为1,代表剩余空间自动扩大。
  • flex-shrink :定义项目的缩小比例,默认为1允许缩小。当一个元素为0时,其他元素为1,空间缩小时为1的元素会缩小。
  • flex-basis :定义了在分配多余空间之前,项目占据的主轴空间。

我们将已下面图片布局作为例子实现:

图片

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
//html代码
<div class="page">
<div class="header"></div>
<div class="layout">
<div class="sidebar"></div>
<div class="content"></div>
</div>
</div>
//css代码
.page{
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
}
.header{
height: 50px;
}
.layout{
display: flex;
flex: 1 1 auto;
}
.sidebar{
width: 230px;
height: 100%;
}
.content{
flex: 1 1 auto;
overflow-y: auto;
}

ps:css3中vw与vh代表浏览器可视宽高,1vw代表可视宽度的1%,1vh代表可视高度的1%。

3.作业

看了以上代码是不是觉得实现起来非常简单呢。让我们动起手来自己实现一个吧。请以下面图片用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
//html代码
<div class="page">
<div class="sidebar"></div>
<div class="layout">
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
</div>
</div>

//css代码
.page{
width: 100vw;
height: 100vh;
display: flex;
}
.sidebar{
width: 230px;
height: 100%;
}
.layout{
display: flex;
flex: 1 1 auto;
flex-direction: column;
}
.header{
height: 50px;
}
.content{
flex: 1 1 auto;
}
.footer{
height: 50px;
}

4.总结

其实不管是要后台管理系统的布局还是其他页面的布局,flex布局的宗旨就是固定大小的不变,自适应宽高的根据屏幕分辨率自适应扩大或缩小。而自适应扩大或缩小最关键的属性就是flex-grow,flex-shrink属性,把这两个属性彻底理解了,那么页面的自适应就很好解决了。