flex弹性三列布局:左右两列宽度固定,中间宽度自适应

2020-06-0606:27:46网页制作Comments1,624 views字数 896阅读模式

代码实例,它实现了三列布局,左右两列宽度固定,中间宽度自适应。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/19422.html

代码实例:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/19422.html

[HTML] 纯文本查看 复制代码运行代码
01
02
03
04
05
06
07
08
09
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>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
body{
  margin: 0;
   padding: 0;
}
.box{
  display: flex;
}
.left{
  width: 300px;
  height:400px;
  background: #B4D3F7;
}
.middle{
  flex-grow:1;
  background: #F7E8B4;
}
.right{
  width: 300px;
  height:400px;
  background: #B4D3F7;
}
</style>
</head>
<body>
<div class="box">
  <div class="left"></div>
  <div class="middle"></div>
  <div class="right"></div>
</div>
</body>
</html>

上面代码实现了我们的要求,下面对它进行一下简单介绍。
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/19422.html

一.实现过程:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/19422.html

[CSS] 纯文本查看 复制代码
1
2
3
.box{
  display: flex;
}

要实现flex弹性布局,那么必然某一个父元素要应用display: flex。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/19422.html

[CSS] 纯文本查看 复制代码
1
2
3
4
5
.left{
  width: 300px;
  height:400px;
  background: #B4D3F7;
}

左栏采用固定尺寸,右栏也是如此。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/19422.html

[CSS] 纯文本查看 复制代码
1
2
3
4
.middle{
  flex-grow:1;
  background: #F7E8B4;
}

之所以能够实现尺寸自适应,关键是应用了flex-grow属性。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/19422.html

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/zhizuo/19422.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定