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

2020-6-6

一栏宽度固定，一栏宽度自适应效果。

面就介绍一下如何使用flex弹性布局方式实现类似功能。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码

<!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>

上面代码实现了左侧宽度固定，右侧宽度自适应，下面做一下简单分析。

[CSS] 纯文本查看 复制代码

.demo{
  display:flex;
}

要使用弹性布局，自然要在某个父元素上施加上述类似样式。

[CSS] 纯文本查看 复制代码

flex-grow:0

flex-grow属性用来规定子项目如何利用剩余的空间。

THE END

flex弹性布局：水平、垂直居中代码实例

<<上一篇

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

下一篇>>