получить изображения и Divs одинакового размера с flexbox - PullRequest
Новая
       20

получить изображения и Divs одинакового размера с flexbox

0 голосов
/ 05 июня 2018

Я знаю, что это, вероятно, основной вопрос, но до сих пор я не смог решить его через Google:

Я хочу иметь панель навигации с изображением (логотипом) и 3 ссылками справа,Я хочу, чтобы все они имели одинаковую высоту и одинаковую высоту, примерно так: prototype Navbar

однако все, что мне удается, это сделать так:Problem navbar

#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>

Ответы [ 2 ]

0 голосов
/ 05 июня 2018

Вы почти сделали это, единственное, что вам было нужно, это в основном определить <div> вокруг <img>, чтобы <img> мог просто заполнить его:

#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);
}
<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>
0 голосов
/ 05 июня 2018

Может быть, что-то вроде этого: 

#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 -ween» и установите одинаковую высоту как изображения, так и div со ссылками.Надеюсь, это поможет

...