Dealing with flexbox while changing an element - css

Question

I have a problem with styling my bar, which works on flexbox.
bar
As you can see, there is three divs inside: one sticked to the left border and another sticked to right border; there is also a small div in the middle showing the amount of comments (80px) and I want it to go left and stick to the div on left. Is it a chance to manage this with flexbox, without changing for display: inline-block?
The bar has a class .article__metas.
The div in the middle is .social_item.
<div class="article__metas">
<div class="item date">
//showing date
</div>
<div class="seperator"></div>
<?php
/**
$clist = get_the_category_list(', ');
if (!empty($clist)) {
?>
<div class="item categories">
<?php
echo $clist;
?>
</div>
<div class="seperator separator-categories"></div>
<?php } */
?>
<?php
$share = $app->getPostStats();
if ($share->comment_count > 0 || $share->share_count > 0):?>
<div class="item social_item">
<?php
if ($share->comment_count > 0) {
echo '<span>';
echo '<img src="' . _img_url('comment.svg') . '"/>';
echo '<span class="amount">' . $share->comment_count . '</span>';
echo '</span>';
}
if ($share->share_count > 0) {
echo '<span>';
echo '<img src="' . _img_url('share.svg') . '"/>';
echo '<span class="amount">' . $share->share_count . '</span>';
echo '</span>';
}
?>
</div>
<?php endif; ?>
<?php get_template_part('inc/article/share'); ?>
</div>
And Sass:
.article__metas {
color: #888888;
font-size: 12px;
display: flex;
border-bottom: 1px solid #e5e5e5;
justify-content: space-between;
#include link-color('a', '#888');
a:hover {
text-decoration: underline;
}
.item {
padding: 20px;
&:first-child {
padding-left: $cards_left;
}
}
.seperator {
display: block;
align-self: stretch;
width: 1px;
background-color: #e5e5e5;
}
.social_item {
display: flex;
align-items: center;
justify-content: space-between;
span + span {
margin-left: 20px;
}
& > span {
display: block;
white-space: nowrap;
img {
width: 16px;
display: inline-block;
}
}
img {
margin-top: 2px;
margin-right: 9px;
}
}
}
Thank you in advance!

Answer 1

Please check if this is what you need. SCSS doesn't work here, so you need to copy to your own environment.
.ariticle__metas is now aligned left and .social_item has a margin-left:auto
Fiddle here
.article__metas {
color: #888888;
font-size: 12px;
display: flex;
border-bottom: 1px solid #e5e5e5;
justify-content: left;
#include link-color('a', '#888');
a:hover {
text-decoration: underline;
}
.item {
padding: 20px;
&:first-child {
padding-left: 10px;
}
}
.seperator {
display: block;
align-self: stretch;
width: 1px;
background-color: #e5e5e5;
}
.social_item {
display: flex;
align-items: center;
justify-content: space-between;
margin-left: auto;
span + span {
margin-left: 20px;
}
& > span {
display: block;
white-space: nowrap;
margin-right: 10px;
img {
width: 16px;
display: inline-block;
}
}
img {
margin-top: 2px;
margin-right: 9px;
}
}
}
<div class="article__metas">
<div class="item">Dodano 18.04.2016</div>
<div class="seperator"></div>
<div class="item">1</div>
<div class="seperator"></div>
<div class="social_item">
<span>Spodobal Ci</span>
<img src="http://placehold.it/15" />
<img src="http://placehold.it/15" />
<img src="http://placehold.it/15" />
<img src="http://placehold.it/15" />
</div>
</div>