Иногда чувствую себя тупым :/
Имеется страница (на css - свойства, связанные с текстом, не обращать внимания, в img рандомная картинка, занимающая 500px):
<body>
<div class="main">
<header>
<div class="nav">
aaaaaaaaaaaa
</div>
<div class="logo">
<img src="images/logo.png">
</div>
<div class="contacts">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
</header>
</div>
</body>
.main {
width:100%;
height:5000px;
max-width:1700px;
margin:auto;
position:relative;
z-index:-2;
padding-top:50px;
background-color:#d1d6d7;
}
header {
width:100%;
display: flex;
position: relative;
}
header::after {
content: " ";
width:100%;
position: absolute;
top:34px;
box-shadow: 0px 2px 23px -2px rgba(0,0,0,0.5);
height:80px;
background-color:#f5f5f5;
z-index:-1;
}
.nav, .logo, .contacts {
border:1px solid black;
display: flex;
flex-grow:1;
}
.nav {
font-family:"Yantramanav", sans-serif;
font-size:1em;
color:#8b9aa9;
}
.logo {
width:500px;
flex-grow:0;
min-width:500px;
margin:0 auto;
}
.logo img {
width:100%;
height:100%;
}
.contacts {
font-family:"Yantramanav", sans-serif;
font-size:1em;
color:#32475b;
font-weight:bold;
}
Как сделать так, чтобы блок logo располагался ровно посередине, а два блока слева/справа занимали, соответственно, одинаковую ширину в независимости от ширины контента в них? и при этом, все это должно быть адаптивным. И еще - лого, которое я собираюсь использовать - png, рационально ли будет на мелких экранах через media запрос вставлять лого меньшего размера, чтобы качество не терялось, или есть какой - нибудь более правильный путь? И да, тут код в спойлер вставить как - нибудь можно? я не нашел :D
