Live
<div class="g-container"> <p>这是第一行文案</p> <p>这是第二行文案</p> <p class="s-thirf">1、剩余多行文案需要垂直居中剩余空间</p> <p class="s-forth">2、剩余多行文案需要垂直居中剩余空间</p> <p>这是最后一行文案</p></div>
Live
x
.g-container { width: 600px; height: 300px; background: #336699; display: flex; flex-wrap: wrap; flex-direction: column;}p { padding: 10px; box-sizing: border-box; line-height: 24px; color: #fff;}.s-thirf,.s-forth{ color: #ff9966;}.s-thirf { margin-top: auto;}.s-forth { margin-bottom: auto;}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.