我想将一组元素对齐到 Flexbox 列的顶部，将另一组元素对齐到 Flexbox 列的底部 - 仅用空间分隔这两组元素。
http://codepen.io/anon/pen/eNyKdg
超文本标记语言
<html>
<body>
<div class="page-flex-container">
<div class="sidebar">
<h2>sidebar</h2>
<div class="circular"></div>
<div class="circular"></div>
<div class="circular"></div>
<div class="bottom">
align-bottom
</div>
</div>
<div class="main-wrapper">
<div class="header">header</div>
<div class="content">content</div>
</div>
</div>
</body>
</html>
萨斯
html, body
height: 100%
width: 100%
margin: 0
.page-flex-container
width: 100%
height: 100%
display: flex
flex-direction: row
justify-content: flext-start
align-items: stretch
.sidebar
flex: 0 0 175px
height: 100%
background-color: #6A1B9A
display: flex
flex-direction: column
justify-content: flext-start
.bottom
height: 50px
width: 100% …