display:box,给子级box-flex:1,文字字数不同,div宽度就不同,怎么让他们相同

<div class="small_title">
    <div>在职人员</div>
    <div>自由职业者</div>
    <div>退休人员</div>
    <div>在校学生</div>
    <div>学龄前儿童</div>
</div>

.small_title{display:-webkit-box;display:-moz-box;display:-ms-box;}
.small_title div{-webkit-box-flex:1; -moz-box-flex:1;-ms-box-flex:1;text-align:center;line-height:3rem;border:1px solid #336799;border-right:0px;}

子级的五个div宽度我想均等 文字字数不同就不能均等,谢谢

你在.small_title div 多添加一个width宽度 这样就等宽了

最好采用百分比5个就20%,3个就33.33333%

.small_title div{
    -webkit-box-flex:1;
    -moz-box-flex:1;
    -ms-box-flex:1;
    text-align:center;
    line-height:3rem;
    border:1px solid #336799;
    border-right:0px;

    /*add*/
    width: 20%;
}