使用 flexbox 时图像消失

Posted 2023-03-06

【中文标题】使用 flexbox 时图像消失

【英文标题】：Image dissapears when I use flexbox

【发布时间】：2021-07-08 04:04:28

【问题描述】：

我正在尝试构建此导航栏并使其也具有响应性，但问题是当我应用 display: flex; 时，徽标就会消失。出于某种原因，当我使用固定宽度时，图像会保留，但是当我使用百分比时，图像就会消失。我想使用百分比来保持导航栏的响应能力。

这是我目前所拥有的。

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


header 
  display: flex;
  border: 10px solid orange;
  justify-content: space-around;
  width: 100%;


header div#company-logo img#header-img 
  width: 50%;

<header id="header">
  <div id="company-logo">
    <img src="https://via.placeholder.com/100x50.jpg"  id="header-img">
  </div>
  <nav id="nav-bar">
    <ul>
      <li class="nav-link"><a href="http://">Home</a></li>
      <li class="nav-link"><a href="http://">Info</a></li>
      <li class="nav-link"><a href="http://">Contact Us</a></li>
    </ul>
  </nav>
</header>

就像我之前说的，我尝试过使用固定百分比，例如 px 或 vw。我只是想了解为什么使用百分比时图像会消失。

【问题讨论】：

将 % 宽度放在 #company-logo 上，而不是 #header-img 上

它按预期工作codepen.io/kumarmasterpraveen/pen/qBRomQr

#nav-bar 的 css 是什么？

【参考方案1】：

#company-logo 
  flex: 0 0 auto;

...应该这样做。意思是：

flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;

重要的位是flex-shrink: 0; flex-basis: auto;。