一、
样式:
代码:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.wrap{
overflow: hidden;
line-height: 28px;
padding: 10px 10px;
display: flex;
background: #F2F2F2;
}
.fl{
float: left;
display: flex;
align-items: center;
padding: 0 20px 0 8px;
}
.fr .deliveryStatus {
text-align: right;
}
.fm{
display: flex;
flex-direction: column;
flex: 1;
}
.fm .inner > div{
padding-right: 4%;
text-align: left;
float: left;
}
</style>
</head>
<body>
<div class="wrap">
<div class="fl">Icon</div>
<div class="fm">
<div class="inner">
<div>象屿库</div>
<div>订单编号:1234567890</div>
<div>提货函编号:1234567890</div>
<div>提货方式:自提</div>
</div>
<div class="inner">
<div>买家:找钢网</div>
<div>联系人:JOJO 15112341234</div>
<div>提货凭证:凭证</div>
<div>备注:无</div>
</div>
</div>
<div class="fr">
<div class="deliveryStatus">正在提货</div>
<div>提货函时间:2019-07-15 16:03:55</div>
</div>
</div>
</body>
</html>
二、
样式:
代码:
替换.fm .inner > div为,能够实现上下对齐:
.fm .inner{
display: flex;
}
.fm .inner > div{
padding-right: 1%;
flex: 1;
}
上下对齐需要上下的div数是一样的,可以使用<div> </div>来占位
flex = flex-grow(缩小比例) + flex-shrink(放大比例) + flex-basis(元素在主轴上的初始尺寸)
具体用法可参考这两篇文章: