切换额外的flexbox div

我创建了一个共享栏，想隐藏一些不太受欢迎的选项。问题是，它的创建与最新和最大的flexbox布局，所以普通的jQuery切换不会削减它。

我如何解决这个问题:display: none; -> display: flex;如果有一个css唯一的方法，将不胜感激，但任何jQuery解决方案是受欢迎的!

这是一个带有社交div示例的钢笔。正如你所看到的，它创建了一个块，而不是保持行(尝试更改#morediv以显示:flex;看到魔法了!)

<div class="sharing">
<div class="media facebook">
    <a href="#">
        <span class="logo fa fa-facebook"></span>
        <span class="divider"></span>
        <span class="text">Share on Facebook</span>
    </a>
    </div>
    <div class="media twitter">
    <a href="#">
        <span class="logo fa fa-twitter"></span>
        <span class="divider"></span>
        <span class="text">Share on Twitter</span>
    </a>
</div>
<div id="more" style="display: none;">
    <div class="media google">
        <a href="#">
            <span class="logo fa fa-google-plus"></span>
        </a>
    </div>
    <div class="media mail">
        <a href="#">
            <span class="logo fa fa-envelope-o"></span>
        </a>
    </div>
</div>
<div class="media more">
    <a href="#">
        <span class="logo plus">+</span>
    </a>
</div>
</div>

Sass

// vars
$facebook: #3a559f;
$twitter: #00abf0;
$google: #d8412c;
$mail: #ccc;
$more: #eee;
$white: #fff;
$bold: bold;
$border-radius: 4px;
.plus { color: #000; }
.minus { color: #000; }
.sharing {
display: flex;
justify-content: center;
padding: 30px 0;
font-size: 11px;
font-weight: $bold;
.media {
    margin: 0 5px;
    min-width: 38px;
    border-radius: $border-radius;
    &.facebook {
        background-color: $facebook;
        .divider {
            background-color: #344c8f;
        }
    }
    &.twitter {
        background-color: $twitter;
        .divider {
            background-color: #009ad8;
        }
    }
    &.google {
        background-color: $google;
    }
    &.mail {
        background-color: $mail;
    }
    &.more {
        background-color: $more;
    }
    a {
        display: flex;
        align-items: center;
        height: 38px;
        color: $white;
        text-decoration: none;
        .logo {
            display: flex;
            justify-content: center;
            flex: 1;
            padding: 0 10px;
            font-size: 17px;
        }
        .divider {
            width: 1px;
            height: 38px;
            display: inline-block;
        }
        .text {
            padding: 0 10px;
        }
    }
}
}

JS

$('.more').click(function() {
    $('#more').toggle( function() {
        $('.more span').toggleClass('plus minus');
    });
});