flex实现经典两栏布局

最新推荐文章于 2025-04-03 01:03:54 发布

qq_41067386

最新推荐文章于 2025-04-03 01:03:54 发布

阅读量1.6w

点赞数 1

分类专栏： css 文章标签： flex

本文链接：https://blog.csdn.net/qq_41067386/article/details/80425425

版权

css 专栏收录该内容

1 篇文章

订阅专栏

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8">  
<style>  
.parent{
  height:500px;  
  border:1px solid #222;  
  display:flex;/*设为伸缩容器*/  
  flex-flow:row;/*伸缩项目单行排列*/  
}  
.stable{  
  width:200px;/*固定宽度*/  
  border:1px solid  #ccc;  
  margin:20px;  
}  
.change{  
  flex:1;/*这里设置为占比1，填充满剩余空间*/  
  border:1px solid #ff4400;  
  margin:20px;  
}  
</style>  
</head>  
<body>  
  <div class="parent">  
    <div class="stable">stable 固定宽度200px</div>  
    <div class="change">changeable 可变宽度</div>  
  </div>  
</body>  
</html>