html - 使用相对单位的最大宽度查询 Flexbox 显示

Question

我正在尝试使用 display flex 连续显示 4 张照片和团队成员的传记以适合包装容器。当我对每个 img 使用 max-width 到 360px 时它有效，但当我以 % 相对单位使用 max-width 时它不起作用。有人知道为什么吗？我想在我的所有元素中使用相对单位，但我无法解决这个问题。

<div id="people">

                    <div class="john person">
                        <img src="images/john%20doe.jpg" alt="CEO">
                        <h3>John Doe</h3>
                        <h4>CEO & Founder</h4>
                        <button>Contact</button>
                    </div>

                    <div class="jane person">
                        <img src="images/jane%20doe.jpg" alt="architect">
                        <h3>Jane Doe</h3>
                        <h4>Architect</h4>
                        <button>Contact</button>
                    </div>

                    <div class="mike person">
                        <img src="images/mike%20ross.jpg" alt="architect">
                        <h3>Mike Ross</h3>
                        <h4>Architect</h4>
                        <button>Contact</button>
                    </div>

                    <div class="dan person">
                        <img src="images/dan%20star.jpg" alt="architect">
                        <h3>Dan Star</h3>
                        <h4>Architect</h4>
                        <button>Contact</button>
                    </div>            

                </div>


    #people{
        display:flex;
        flex-wrap: wrap;
        justify-content: space-between;
        flex-basis:100%;
    }

   #people div img {
        max-width: 360px;
    }

以上代码实现了结果。但是，如果我想将 #people div img {} 中的最大宽度更改为相对的 % 单位，有谁知道我该怎么做。我正在使用在线模板并尝试自己重建它(因此我问，如果我必须自己为真实元素创建这样的东西，我不会理解这个问题)。谢谢!

Answer 1

我想你指的是这个。您需要将 flex:1; 的属性添加到 #people 子类，即 .person，从而使其灵活(flex-grow: 1, flex-shrink:1, flex-basis:auto).然后将图像的宽度设置为 100%，这将根据视口(viewport)宽度调整大小。

#people {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.person{
flex:1;
}

.person img {
max-width:100%;
}

<div id="people">

  <div class="john person">
    <img src="http://via.placeholder.com/300x300" alt="CEO">
    <h3>John Doe</h3>
    <h4>CEO & Founder</h4>
    <button>Contact</button>
  </div>

  <div class="jane person">
    <img src="http://via.placeholder.com/300x300" alt="architect">
    <h3>Jane Doe</h3>
    <h4>Architect</h4>
    <button>Contact</button>
  </div>

  <div class="mike person">
    <img src="http://via.placeholder.com/300x300" alt="architect">
    <h3>Mike Ross</h3>
    <h4>Architect</h4>
    <button>Contact</button>
  </div>

  <div class="dan person">
    <img src="http://via.placeholder.com/300x300" alt="architect">
    <h3>Dan Star</h3>
    <h4>Architect</h4>
    <button>Contact</button>
  </div>

</div>