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

It is not easy to set the width for li. Use padding to set only padding without setting width. The longer the text content, the more width it takes up. Because everyone’s padding value is the same. If width is set, then everyone will If the width of all the left and right white spaces is the same, it will be inversely proportional to the width of your text