css3 - flex布局问题

问题描述

设计稿：

下面我做的部分，结果显示宽度根据小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; }

问题解答

要给li设置宽度 不好使用padding来设置 只设置padding 不设置width 会导致文字内容越长，所占用的宽度就越多 因为大家的padding值都是一致的 如果设置了width，那么大家的宽度一致 所有的左右空白空间便会与你文字内容宽度成反比