问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

为什么这里的图片，作为Flex的子元素，没有被压缩？

头像
唐金健
    42611016

    image.png

    <!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>标题</title>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <h2>为什么这里的图片，作为Flex的子元素，没有被压缩？</h2>

    <h3>图片没有被压缩</h3>
    <div class="main-box1">
      <img src="./1.png" />
      <img src="./1.png" />
      <img src="./1.png" />
      <img src="./1.png" />
    </div>

    <h3>div被压缩了</h3>
    <div class="main-box2">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </body>
</html>

    .main-box1,
.main-box2 {
  display: flex;
  border: 4px solid aquamarine;
  width: 300px;
}

.main-box1 img,
.main-box2 div {
  width: 100px;
  height: 100px;
}

.main-box2 div {
  background-color: pink;
}

.main-box2 div:nth-child(2n) {
  background-color: antiquewhite;
}
    前端css
    阅读 2.5k
    2 个回答
    得票最新
    头像
    Mannix
      2.2k2311
      ✓ 已被采纳

      因为 flex 的子元素的 min-width 和 min-height 值比较特殊，是 auto，一般情况下相当于内容大小和本身大小中的较小值

      img 图片大小可认为是内容大小

      如果给 div 的子元素或伪元素设置宽度，div 也会被撑开，尝试添加下面代码看效果：

      .main-box2 div::before {
  content: "";
  display: block;
  width: 100px;
}

      想超出时自动收缩的话，设置 min-width: 0; 即可

      .main-box1 img,
.main-box2 div {
  min-width: 0;
  width: 100px;
  height: 100px;
}
      头像头饰
      陟上晴明
        21.1k124691

        因为在图片是算作内容宽度的（src 载入的图像应该是算作 植入的内容）。
        你可以在 main-box2 容器内部的 div 元素中输入一些文字，可以看到这些 div 也是会被撑开的

        以下是张大佬的《CSS新世界》中提到的一些关于 flex 子项尺寸的解释：

        在弹性布局中，一个 flex 子项的最终尺寸是基础尺寸（或内容尺寸）、弹性增长或收缩、最大> 最小尺寸共同作用的结果。
        最终尺寸计算的优先级是：
        最大最小尺寸限制 > 弹性增长或收缩 > 基础尺寸

        基础尺寸由 flex-base 属性或 width 属性，以及 box-sizing 盒模型共同决定；
        内容尺寸最指最大内容宽度，当没有设置基础尺寸是会顶替基础尺寸的角色；
        弹性增长指的是 flex-grow 属性，弹性收缩指的是 flex-shrink 属性；
        最大尺寸主要受 max-width 属性限制；最小尺寸则比较复杂，受最小内容宽度、width 属性和 min-width 属性共同影响。

        也可以看一下我当时遇到一个 flex 容器宽度被内容撑开的问题 时记录的笔记。

        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题
        宣传栏