【踩坑记录】flex布局 flex-shrink: 0防止图片被压缩

最新推荐文章于 2024-07-24 15:20:58 发布

成长中的向日葵

最新推荐文章于 2024-07-24 15:20:58 发布

阅读量2.1k

点赞数 3

分类专栏： css vue 文章标签： css css3 html

本文链接：https://blog.csdn.net/SSophia/article/details/122449166

版权

vue 同时被 2 个专栏收录

12 篇文章 1 订阅

订阅专栏

css

8 篇文章 0 订阅

订阅专栏

flex布局 flex-shrink: 0防止图片被压缩

flex容器中，当空间不够的时候，flex-shrink不为0的元素会被压缩，所以解决的方法就是给图片设置：flex-shrink:0
在这里插入图片描述
上述图片代码：

  .basics-body {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin:16px;
            width:100%;
            .basics-body-left {
              width: 120px;
              height: 120px;
              flex-shrink: 0;/*防止被压缩*/
              img {
                width: 100%;
                height: 100%;
              }
            }
            .basics-body-right {
              margin-left: 16px;
              width: 220px;
               flex-shrink: 1;
              p {
                margin: 12px 0;
                font-size: 12px;
                height: 16px;
                line-height: 16px;
              }
            }
          }