How to center logo using flexbox? - html

Question

I need to center the logo in the middle of the container and not in the middle of the space between the start div and end div. Is there any way to do it with using flexbox?
Here's a snapshot of the logo centered in the middle of the space between the two divs:
My code:
/* =======Header Start======= */
.bar-wrapper{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: baseline;
padding-bottom: 15px;
border-bottom: 2px solid #3e3e3e !important;
}
/* =======Social Icons======= */
.social-icons-list {
padding-left: 0;
list-style: none;
}
.social-icons-list li {
display: inline-block;
margin-right: 13px;
}
.social-icons-list .fab {
width: 30px;
height: 30px;
line-height: 25px;
border: 2px solid #3e3e3e;
text-align: center;
color: #3e3e3e;
border-radius: 50%;
}
/* =======Social Icons End======= */
.search-btn a{
color: #3e3e3e;
}
.search-btn .fas{
font-size: 26px;
}
.logo img{
align-self: center;
}
<div class="container">
<div class="bar-wrapper">
<div class="social-icons">
<ul class="social-icons-list">
<li> <i class="fab fa-facebook-f"></i></li>
<li> <i class="fab fa-twitter"></i></li>
<li> <i class="fab fa-google-plus-g"></i></li>
<li> <i class="fab fa-youtube"></i></li>
<li> <i class="fab fa-instagram"></i></li>
</ul>
</div>
<div class="logo">
<img src="imgs/Logo.png" alt="logo">
</div>
<div class="search-btn">
<i class="fas fa-search"></i>
</div>
</div>
</div>

Answer 1

First of all, you should delete property align-self: center; on .logo img. You define spaces between the elements of flexbox by adding justify-content: space-between;, aligning makes no sense in this case.
This property incl. its value justify-content: space-between; computes the spaces between the items automatically and, actually, the spaces must be proportional. However, the widths of the elements in the flexbox are different which makes the spaces between them different as well. Try to add to each item in flexbox min-width-property and it should fix your problem.