css利⽤flex实现左-中-右布局⼀、
样式：
代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.wrap{
flex布局对齐方式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 151********</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（元素在主轴上的初始尺⼨）具体⽤法可参考这两篇⽂章：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。