<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹性盒子布局</title>
<style type="text/css">
.box{
min-height: 200px;
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap;
flex-flow: row;
justify-content: space-between;
align-items:flex-end;
background-color: gray;
}
.A,.B,.C{
background-color: white;
border: 3px solid red;
}
.box div.A{
order: 1;
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
align-self: center;
}
.box div.B{
order: 3;
flex: 0 1 auto;
align-self: center;
}
.box div.C{
order: 2;
flex: 0 1 auto;
align-self: center;
}
</style>
</head>
<body>
<div class="box">
<div class="A">A</div>
<div class="B">B</div>
<div class="C">C</div>
</div>
</body>
</html>
袁同学——6月24日