css3 - flex布局问题

Question

设计稿：

下面我做的部分，结果显示宽度根据小box里面的内容宽度而变化，不知道怎么设置小box宽度是一样的，不受里面的内容而影响，还有小box之间的间隔要有2px的缝隙。

<ul class="result_boxs archives_gray">
        <li>
            账号／姓名：<br>
            <span>18611444620</span>
        </li>
        <li>
            性别：<br>
            <span>女</span>
        </li>
    </ul>
    <ul class="result_boxs archives_gray">
        <li>
            年龄：<br>
            <span>60岁</span>
        </li>
        <li>
            体重：<br>
            <span>129kg</span>
        </li>
    </ul>
    <ul class="result_boxs archives_orange">
        <li>
            您的BMI值为：<br>
            <span>23.9</span>
        </li>
        <li>
            您的标准体重范围是：<br>
            <span>70kg</span>
        </li>
    </ul>

.result_boxs {
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: -webkit-box;
    width: 94%; margin: 2px auto 0; }
.result_boxs li {
    -webkit-box-flex: 1;
    -ms-box-flex: 1;
    box-flex: 1;
    padding: 10px 5px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 4px;
    line-height: 1.6;
    text-align: center; }

Answer 1

要為li設定寬度不好使用padding來設定只設定padding 不設定width 會導致文字內容越長，所佔用的寬度就越多因為大家的padding值都是一致的如果設定了width，那麼大家的寬度一致所有的左右空白空間會與你文字內容寬度成反比