flex布局

小程序照片合成

已于 2024-10-16 15:51:14 修改

阅读量526

点赞数 3

文章标签： html 前端

于 2024-10-16 13:39:46 首次发布

本文链接：https://blog.csdn.net/cc1314_/article/details/142979736

版权

1、在 flex 容器上，设置align-items , 子项就会保持其自身的高度了，不会自动高度对齐。

2、

<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>