当我使用 flexbox 时图像消失了

Question

我正在尝试构建此导航栏并使其响应，问题是当我应用 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" alt="hamburguer logo" 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。我只是想了解为什么当我使用百分比时图像消失了。

Answer 1

#company-logo {
  flex: 0 0 auto;
}

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

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

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

当我使用 flexbox 时图像消失了

Image dissapears when I use flexbox

css

svg

flexbox

responsive-design