使用flexbox获取图像和Div的大小相同

Question

我知道这可能是一个基本问题，但到目前为止我还没能通过谷歌解决它：

我想要一个带有图像（徽标）的导航栏和右侧的3个链接。我希望他们都有相同的高度，并在同一高度，有点像这样：

然而我所管理的只是让它看起来像这样：

#nav-bar {
  position: fixed;
  top: 0px;
  width: 100%;
  background: #b7b7b7;
  border: 1px #4c4c4c solid;
  padding: 1em;
}

#flex {
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
  align-content: center;
}

img {
  margin-top: 20px;
  height: auto;
  width: 15%;
}

.nav-link {
  border: 1px solid #4c4c4c;
  padding: 0.5em;
  background-color: #b7b7b7;
  color: black;
  text-decoration: none;
}

<nav id="nav-bar">
  <div id="flex">
    <div><img src="https://i.pinimg.com/originals/58/c8/82/58c88275c1a3389a7260baf05bf34e9a.jpg" alt="violin logo" id="header-img"></div>
    <a href="#products" class="nav-link">Products</a>
    <a href="#video" class="nav-link">Demo</a>
    <a href="#newsletter" class="nav-link">Newsletter</a>
  </div>
</nav>

Answer 1

也许是这样的：

#nav-bar {
  position: fixed;
  top: 0px;
  width: 100%;
  background: #b7b7b7;
  border: 1px #4c4c4c solid;
  padding: 1em; 
}

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

img {
  height: 50px;
  width: auto;
}

.nav-links {
  padding-right: 50px;
}

.nav-links .nav-link {
  border: 1px solid #4c4c4c;
  background-color: #b7b7b7;
  color: black;
  height: 50px;
  display: inline-block;
  text-decoration: none;
}

 <nav id="nav-bar">
  <div id="flex">
  <img src="https://i.pinimg.com/originals/58/c8/82/58c88275c1a3389a7260baf05bf34e9a.jpg" alt="violin logo" id="header-img">
  <div class="nav-links">
    <a href="#products" class="nav-link">Products</a>
    <a href="#video" class="nav-link">Demo</a>
    <a href="#newsletter" class="nav-link">Newsletter</a>
  </div>
  </div>
</nav>

只需将链接包装到div中，然后将justify-content设置为'space-between'，并使用链接设置image和div的相同高度。希望它会有所帮助

Answer 2

你几乎做到了，你唯一需要的就是基本上适当地调整<div>周围<img>的大小，以便<img>可以填充它：

＆＃13;

＆＃13;

#nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #b7b7b7;
  border: 1px #4c4c4c solid;
  padding: 1em; 
  box-sizing: border-box; /* to exclude paddings&borders from width instead of adding them */
}

#flex{
  display: flex;
  justify-content: start;
  align-items: stretch;
}


/* sizing the div with the img */
#flex > div {
  width: 15%;
  flex: 1 0 auto;
}

/* making the img filling this div */
img{
  display: block;
  width: 100%;
}

.nav-link{
  border: 1px solid #4c4c4c;
  padding: 0.5em;
  background-color: #b7b7b7;
  color: black;
  text-decoration: none;
  
  /* making links fill all the space, except some gaps between them */
  flex: 1 1 auto;
  margin-left: .5em;
  
  /* centering the text in the links and making it responsive */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: calc(10px + 2vw);
}

＆＃13;

<nav id="nav-bar">
  <div id="flex">
    <div>
     <img src="https://i.pinimg.com/originals/58/c8/82/58c88275c1a3389a7260baf05bf34e9a.jpg" alt="violin logo" id="header-img">
    </div>
    <a href="#products" class="nav-link">Products</a>
    <a href="#video" class="nav-link">Demo</a>
    <a href="#newsletter" class="nav-link">Newsletter</a>
  </div>
</nav>

＆＃13;

＆＃13;

＆＃13;