JQueryのタブ切り替えでflexboxを使う

Question

前提・実現したいこと

その画面をjqueryにてタブで切り替える機能を実装します。

発生している問題・エラーメッセージ

jqueryでdisplayをnoneからblockに変更することで、表示なしから表示に切り替えているのですが、displayを指定しているためflexが使えません。
floatで横並びにしてはみたのですが、flex、もしくは別のいい書き方はありますでしょうか？
サンプルの為、見た目は整えていないです。

該当のソースコード

<div class="tab-panel">
	<ul class="tab-group">
		<li class="tab tab-A is-active">Tab-A</li>
		<li class="tab tab-B">Tab-B</li>
		<li class="tab tab-C">Tab-C</li>
	</ul>

    <div class="panel-group">
		<ul class="panel tab-A is-show">
            <li>aaa</li>
            <li>bbb</li>
        </ul>
		<ul class="panel tab-B">
            <li>ccc</li>
            <li>ddd</li>
        </ul>
        <ul class="panel tab-C">
            <li>eee</li>
            <li>fff</li>
        </ul>
	</div>
</div>

$(function(){
	$('.tab').click(function(){
		$('.is-active').removeClass('is-active');
		$(this).addClass('is-active');
		$('.is-show').removeClass('is-show');
		const index = $(this).index();
		$('.panel').eq(index).addClass('is-show');
	});
});

.panel {
   display:none;
}
.is-show {
    display:block;
}
.tab-group {
    display: flex;
}
.panel li {
    float: left;
}

Answer 1

こういうことでしょうか。

.is-show {
    display: flex;
}

Comments

[rs2]

タブ機能の時はnoneとblockがセットだと思い込んでいました・・・
迅速なご回答助かりました。
ありがとうございます。