css - 在更改元素时处理 flexbox

Question

我的栏样式有问题，它适用于 flexbox。

bar

可以看到，里面有3个div，一个贴左边框，一个贴右边框；中间还有一个小 div，显示评论数量 (80px)，我希望它向左移动并粘在左边的 div 上。是否有机会使用 flexbox 来管理它，而不更改 display: inline-block？

该栏有一个类 .article__metas。中间的 div 是 .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>

还有 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;
    }
  }

}

提前致谢!

Answer 1

请检查这是否是您需要的。 SCSS在这里不起作用，所以你需要复制到你自己的环境。

.ariticle__metas 现在左对齐，.social_item 有 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>