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，那么大家的宽度一致 所有的左右空白空间便会与你文字内容宽度成反比