Positioning two div elements relative to the middle one [duplicate] - html

Question

This question already has answers here:
Is there a way to center one of the flex/grid children(more than three) and with different widths?
(2 answers)
Closed 1 year ago.
I need to center an element #center-navigation relative to the page center and then position the two another on the left (#logo) and right (#contacts) sides of the element. Currently in my implementation #center-navigation is not centered on the page. Is it possible to do with flexbox?
#row {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
#logo {
height: 20px;
width: 80px;
background-color: red;
margin-right: auto;
}
#contacts {
margin-left: auto;
}
h1 {
text-align: center;
}
<div id="row">
<div id="logo">
</div>
<div id="center-navigation">
Some navigation here
</div>
<div id="contacts">
example#mail.org
</div>
</div>
<h1>
Some long website title goes here
</h1>

Answer 1

You can try with css grid :
#row {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
justify-content: space-between;
align-items: center;
text-align: center;
}
#logo {
height: 20px;
width: 80px;
background-color: red;
}
#contacts {
background-color: blue;
text-align: right;
}
#center-navigation {
background-color: green;
}
h1 {
text-align: center;
background-color: yellow;
}
<div id="row">
<div id="logo">
</div>
<div id="center-navigation">
Some navigation here
</div>
<div id="contacts">
example#mail.org
</div>
</div>
<h1>
Some long website title goes here
</h1>

Answer 2

It is impossible to do with flexbox!
I suggest you to use position:absolute.
#row {
/*display: flex;*/
/*flex-direction: row;*/
/*justify-content: center;*/
/*align-items: center;*/
text-align:center;
position:relative;
}
#logo,#contacts{
position:absolute;
left:0;
top:50%;
transform:translateY(-50%);
}
#logo {
height: 20px;
width: 80px;
background-color: red;
margin-right: auto;
}
#contacts {
margin-left: auto;
left:auto;
right:0;
}
h1 {
text-align: center;
}
<div id="row">
<div id="logo">
</div>
<div id="center-navigation">
Some navigation here
</div>
<div id="contacts">
example#mail.org
</div>
</div>
<h1>
Some long website title goes here
</h1>

Answer 3

The #contacts width should be equal to the #logo width.
#contacts, #logo{
width: 20%
}