在更換元素時處理flexbox

我的設計我的酒吧，它適用於flexbox的問題。在更換元素時處理flexbox

正如你可以看到，爲三個div的內部：一個貼在左邊框與另一個貼到右邊界;中間還有一個小格子顯示評論數量（80px），我希望它左移並堅持左邊的div。是否有機會使用flexbox進行管理，而無需更改顯示內聯塊？

酒吧有一個類.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; 
    } 
    } 

}

預先感謝您！

來源

2017-06-06 grace

您可以加入的吧HTML？ – Gerard

當然，在這裏。 – grace

請檢查這是否是你需要的。 SCSS在這裏不起作用，所以你需要複製到你自己的環境中。

.ariticle__metas現在左對齊和.social_item有一個保證金左：自動

小提琴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>

來源

2017-06-06 08:03:04 Gerard

非常感謝傑拉德，會嘗試一下！ – grace

在更換元素時處理flexbox

回答

相關問題