使用flex box
.message {
width: 100vmin;
height: 100vmin;
overflow: hidden;
background: green;
display: flex; // 重点
justify-content: flex-end; // 重点
flex-direction: column; // 重点
align-items: center; // 重点
}
.message__block {
color: white;
width: 100%;
height: 9vmin;
background: black;
margin-bottom: 1.1vmin;
text-align: center;
}
<body>
<div class="message">
<div class="message__block">4</div>
<div class="message__block">3</div>
<div class="message__block">2</div>
<div class="message__block">1</div>
</div>
</body>
如果HTML
元素的顺序是相反的,比如1-4而不是4-1,您仍然可以通过如下方式更改以下属性来实现相同的效果:
justify-content: flex-start;
flex-direction: column-reverse;