猿记录

一个记录、分享的博客

您的位置:主页 > 技术专栏 >

flex布局 左边固定布局,右边自适应

2018-06-26 11:38:41 作者:yxl 次阅读 技术专栏

在移动端,很多小伙伴写列表的时候,左边图片,右边内容。左边的图片是固定的,右边内容是自适应的。下面的例子你就可以使用上了。
这个是css3的属性,所以兼容性需要自己注意下,但是移动端下,很多都可以直接使用了

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

凡本站注明“本站”或“投稿”的所有文章,版权均属于本站或投稿人,未经本站授权不得转载、摘编或利用其它方式使用上述作品。

编辑:yxl 关键词: flex
0

网友评论