使用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;
357
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
