flex布局，功能強(qiáng)大，具體的基本知識這邊就不闡述了，從阮一峰老師的網(wǎng)絡(luò)日志--> Flex 布局教程：語法篇處可以獲取。這邊直接說明問題所在
問題展示
在同一個ng-repeat 循環(huán)中出現(xiàn)的列表樣式中又憨，其中一個cell沒有如設(shè)置的寬度和換行，其余的都正常
CSS
/*容器設(shè)置*/
.weui-cell {
padding: 10px 15px;
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
}
/*項目設(shè)置*/
.weui-cell .cell_title {
flex: 1;
font-size: 15px;
white-space:nowrap;
}
.weui-cell .cell_content {
flex: 2;
font-size: 14px;
text-align: left;
}
HTML
<div ng-repeat="item in lawInfo">
<div class="weui-cells__title sectionTitle">{{item.sectionTitle}}</div>
<div class="weui-cells">
<div class="weui-cell cell" ng-repeat="data in item.arr">
<div class="weui-cell__bd cell_title" ng-hide="data.NOTITLE">
<p>{{data.TITLE}}</p>
</div>
<div class="weui-cell__ft cell_content">{{data.CONTENT}}</div>
</div>
</div>
</div>
JS中沒有對樣式進(jìn)行任何修改锭吨，這邊所有的cell-content都應(yīng)該是一樣的CSS設(shè)置蠢莺。在該滑動頁面中，所有出現(xiàn)這個問題的cell與其他的區(qū)別在于：
含數(shù)字零如、英文的長字符串躏将，不包括 '锄弱、' 、 ' -'等區(qū)分符號耸携，在需要換行的時候沒有換行棵癣，導(dǎo)致寬度與其他cell不同
看出區(qū)別找解決方案就容易多了，應(yīng)該是在文本換行設(shè)置的地方出現(xiàn)了問題夺衍。
解決
word-break 默認(rèn)設(shè)置的話狈谊，在出現(xiàn)長單詞的話，不會進(jìn)行換行沟沙。在例如網(wǎng)址字符串：http://www.baoan.gov.cn/xxgk/xxgkgz/qbmxxgkml/qzfbgs/xxgk_112876/xzfysq這種默認(rèn)無法斷字進(jìn)行換行河劝，而比如、 - 矛紫。等是可以換行的赎瞎。所以需要在長單詞的情況下進(jìn)行換行處理，必須在項目設(shè)置中加上
word-break: break-all;
即可
