CSS 子要素を均等の幅にわけたい（flex）

基本

親要素のスタイル

display: flex;
justify-content: space-between;

子要素のスタイル

flex: 1;

サンプル1

<div style="display:flex;justify-content:space-between;">
    <div style="flex:1;">aaaa</div>
    <div style="flex:1;">aaaa</div>
</div>

サンプル2

下記の場合、「2:1:1」の割合になる

<div style="display:flex;justify-content:space-between;">
    <div style="flex:2;">aaa</div>
    <div style="flex:1;">bbb</div>
    <div style="flex:1;">ccc</div>
</div>