Question

我的样式化我的栏有问题，可以在flexbox上运行。

正如你所看到的，里面有三个div：一个贴在左边框上，另一个贴在右边框上;在中间还有一个小div显示评论量（80px），我希望它向左移动并坚持左边的div。是否有机会使用flexbox管理它，而无需更改显示：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>

和萨斯：

.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

小提琴here

＆＃13;

.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;
    }
  }
}

＆＃13;

<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>

＆＃13;

在更改元素时处理flexbox

1 个答案: