flex 左右固定自适应和溢出处理

最新推荐文章于 2023-12-20 12:05:33 发布

江醉鱼

最新推荐文章于 2023-12-20 12:05:33 发布

阅读量829

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/me_never/article/details/105276148

版权

本文通过代码示例介绍了Flex布局中如何实现左右两侧元素固定，中间内容自适应，并处理元素溢出的情况。通过理解文中提供的经典案例，可以掌握相关技巧。

摘要由CSDN通过智能技术生成

这个东西多看看代码就可以了

<!DOCTYPE html>
<html>
<head>
<style> 
.footer {
   
  width: 300px;
  height: 20px;
  display: flex;
  border: 1px solid #000;
}
.count {
   
  background: #3cc8b4;
  flex: 1 1 auto;/*flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。*/
  width: 50px;
}
.icon {
   
  flex-grow: none; /*icon设置为固定元素，不会自适应增长*/
  background: green;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 50px;
}
.title-container {
   
  background: #9bc;
  max-width: 200px;
}
.title {
   
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

</style>