flex弹性布局：一栏宽度固定，一栏宽度自适应效果

2020-06-0606:26:56网页制作Comments1,609 views字数 759阅读模式

一栏宽度固定，一栏宽度自适应效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/19421.html

面就介绍一下如何使用flex弹性布局方式实现类似功能。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/19421.html

代码实例如下:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/19421.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
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
.demo{
  display:flex;
}
 
.demo .left{
  width:100px;
  min-width:100px;
  max-width:100px;
  height:auto;
  background:#B4D3F7;
  flex-grow:0;
}
 
.demo .right{
  margin-left:10px;
  width:auto;
  height:200px;
  background:#F7E8B4;
  flex-grow:1;
}
</style>
</head>
<body>
<div class="demo">
  <div class="left"></div>
  <div class="right"></div>
</div>
</body>
</html>

上面代码实现了左侧宽度固定，右侧宽度自适应，下面做一下简单分析。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/19421.html

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

要使用弹性布局，自然要在某个父元素上施加上述类似样式。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/19421.html

[CSS] 纯文本查看 复制代码
1
flex-grow:0

flex-grow属性用来规定子项目如何利用剩余的空间。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/19421.html

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

Comment

匿名网友 填写信息

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

确定