htmledit_views">
1、在 flex 容器上，设置align-items , 子项就会保持其自身的高度了 ，不会自动高度对齐。
2、
html"><div class="flexboxborder"><div class="flexbox3"><div class="flexitem flexbox1"><div class="flextitle flexbox2" style="justify-content: end;">MMSI</div><div class="flexcontent flexbox2">{{ aisData.MMSI || aisData.mmsi }}</div></div><div class="flexitem flexbox1"><div class="flextitle">中文船名</div><div class="flexcontent flexbox2">{{ aisData.name || aisData.NameCN }}</div></div><div class="flexitem flexbox1"><div class="flextitle">英文船名</div><div class="flexcontent flexbox2">{{ aisData.NameEN || aisData.name }}</div></div><div class="flexitem flexbox1"><div class="flextitle">船舶类型</div><div class="flexcontent flexbox2">{{ aisData.VesselType || aisData.vesselType }}</div></div></div></div><style lang="less">
@boxcolor:#ccc;
.flexbox3 {display: flex;flex-wrap: wrap;// align-items: center;.flexbox1{display: flex;flex-wrap: wrap;}.flexbox2{display: flex;flex-wrap: wrap;align-items:center;}.flexitem {width: 50%;margin: 0px 0 0px;}.flextitle {color: #000;background:#eee;width: 100px;padding:8px 8px;text-align: right;border-right:1px solid @boxcolor;border-bottom:1px solid @boxcolor;}.flexcontent {padding:0px 8px;word-break: break-all;border-right:1px solid @boxcolor;border-bottom:1px solid @boxcolor;flex:1;}.width100 {width: 100%;}
}
.flexboxborder{border-left:1px solid @boxcolor;border-top:1px solid @boxcolor;
}
</style>
