Flexbox布局问题：图片无法收缩、子元素宽度不均且容器溢出

为类名为main-intro的容器应用flex布局后，出现两个问题：

1. 文本容器.intro与图片的宽度不相等
2. main-intro容器的宽度超出了其父容器container的范围

疑惑点：flexbox不是应该自动为子元素分配相等宽度吗？

相关代码 #

HTML代码

<body>
  <div class="container">
    <div class="main-intro">
      <div class="intro">
        <h1>We design and build better chairs, for a better life</h1>
        <p>In a small shop in the heart of Lisbon, we spend our
        days restlessly perfecting the chair. The result is a
      perfect blend of beauty and comfort, that will have a lasting
    impact on your health.
        </p>
        <a href="#">Shop chairs</a>
      </div>
      <img src="hero.jpg">
    </div>
  </div>
</body>

CSS代码

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container{
  width: 960px;
  margin-right: auto;
  margin-left: auto;
}

img{
  width: 100%;
}

.main-intro{
  display: flex;
}

为什么flex子元素宽度不均分？ #

Flexbox默认不会自动给子元素分配相等宽度，子元素默认宽度由自身内容决定（flex-basis: auto）。只有显式设置子元素的flex属性，才会让它们均分可用空间。

为什么main-intro会超出父容器？ #

图片设置了width:100%，但它作为flex子元素时，若未配置合理的收缩规则，当子元素内容宽度总和超过父容器时，就会导致容器溢出。

修改方案 #

调整CSS，给两个flex子元素添加flex:1属性，同时优化图片显示规则：

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container{
  width: 960px;
  margin-right: auto;
  margin-left: auto;
}

img{
  width: 100%;
  height: auto; /* 保持图片原始比例 */
}

.main-intro{
  display: flex;
  gap: 20px; /* 可选：给子元素添加间距，提升美观度 */
}

/* 让两个子元素均分宽度 */
.intro, .main-intro img {
  flex: 1;
}

代码说明 #

• flex:1 是 flex-grow:1、flex-shrink:1、flex-basis:0% 的简写：
  • flex-grow:1：子元素按比例分配剩余空间
  • flex-shrink:1：空间不足时子元素自动收缩，避免溢出
  • flex-basis:0%：子元素基础宽度设为0，确保完全按比例分配空间
• height:auto：防止图片拉伸变形，保持原始宽高比
• gap:20px：在两个子元素间添加间距，优化布局美观度（可选）

内容的提问来源于stack exchange，提问作者ATLA Fan