flex布局下的宽度的问题

最新推荐文章于 2024-02-26 17:29:47 发布

小白白中之白

最新推荐文章于 2024-02-26 17:29:47 发布

阅读量4.9k

点赞数

分类专栏：网页笔记

本文链接：https://blog.csdn.net/m0_53438035/article/details/119254875

版权

网页笔记专栏收录该内容

41 篇文章 2 订阅

订阅专栏

问题

flex布局下，宽度达到100%以上，发现无效即实际效果最多只能达到100%。

解答

我发现是我对flex布局还不够熟悉。flex布局有如下两个属性。

flex-grow属性：定义项目的放大比例
flex-shrink属性：定义项目的缩小比例

解释：
1：flex-grow属性：定义项目的放大比例。默认值为0，即如果空间有剩余，也不放大。可以是小数，按比例占据剩余空间。

2：flex-shrink属性默认值为1，即如果空间不足将等比例缩小。如果有一个项目的值为0，其他项目为1，当空间不足时，该项目不缩小。负值对该属性无效，容器不应该设置flex-wrap。

由于flex-shrink的属性值默认为1，当宽度超过100%，就会按等比例的缩小至刚好100%，请看如下代码。
代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style type="text/css">
      body{
          display: flex;
          align-items: center;
          justify-content: center;
      }
      .b {
        width: 600px;
        height: 300px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: red;
      } 
      img {
        flex-shrink: 0;
        width: 200%;
        height: 50%;
      }
    </style>
  </head>
  <body>
      <div class="b">
          <img src="../web杂物/6.jpg" alt="">
      </div>
  </body>
  <script></script>
</html>

效果：
在这里插入图片描述
可以看出flex-shrink: 0;确实有效

小白白中之白

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
flex布局下的宽度的问题

问题flex布局下，宽度达到100%以上，发现无效即实际效果最多只能达到100%。解答我发现是我对flex布局还不够熟悉。flex布局有如下两个属性。flex-grow属性：定义项目的放大比例flex-shrink属性：定义项目的缩小比例解释：1：flex-grow属性：定义项目的放大比例。默认值为0，即如果空间有剩余，也不放大。可以是小数，按比例占据剩余空间。2：flex-shrink属性默认值为1，即如果空间不足将等比例缩小。如果有一个项目的值为0，其他项目为1，当空间不足时，该项目
复制链接

扫一扫