Flexbox 列：将多个项目对齐到顶部和底部？ [复制]
Posted
技术标签:
【中文标题】Flexbox 列：将多个项目对齐到顶部和底部？ [复制]【英文标题】：Flexbox column: align multiple items to both top and bottom? [duplicate] 【发布时间】：2015-09-15 23:03:06 【问题描述】：我想将一组元素对齐到 flexbox 列的顶部，并将另一组元素对齐到 flexbox 列的底部——这两组元素之间只有空格。
尝试 #1
http://codepen.io/anon/pen/eNyKdg
HTML
<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>
SASS
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%
background-color: red
align-self: flex-end
.main-wrapper
display: flex
flex-direction: column
justify-content: flex-start
height: 100%
width: 100%
.header
flex: 0 0 100px
background-color: #1E88E5
.content
background-color: #E1BEE7
height: 100%
.circular
width: 75px
height: 75px
border-radius: 50%
overflow: hidden
margin: 15px auto
flex: none
background-color: white
img
display: block
max-width: 100%
尝试 #2
http://codepen.io/anon/pen/mJpKRv
HTML
<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-wrapper">
<div class="item">align-bottom</div>
</div>
</div>
<div class="main-wrapper">
<div class="header">header</div>
<div class="content">content</div>
</div>
</div>
</body>
</html>
SASS
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-wrapper
height: 100%
width: 100%
display: flex
flex-direction: row
background-color: #BA68C8
align-items: flex-end
.item
background-color: red
height: 50px
width: 100%
.main-wrapper
display: flex
flex-direction: column
justify-content: flex-start
height: 100%
width: 100%
.header
flex: 0 0 100px
background-color: #1E88E5
.content
background-color: #E1BEE7
height: 100%
.circular
width: 75px
height: 75px
border-radius: 50%
overflow: hidden
margin: 15px auto
flex: none
background-color: white
问题
在尝试 #1 中，div“align-bottom”未与列的末尾对齐。
在尝试 #2 中，div“align-bottom”与底部对齐，但是当浏览器调整大小时，div“bottom-wrapper”可以覆盖其上方“圆形”div 的一半。我希望“底部包装” div 在调整大小时不与任何其他 div 重叠（即，它应该被推离屏幕）。
请告诉我如何在调整浏览器大小时将底部 div 对齐到列的末尾，并且不与其他 div 重叠。
【问题讨论】：
【参考方案1】：您需要将margin-top: auto; 附加到您的.bottom 类。
这是您的分叉演示：http://codepen.io/anon/pen/aOEKga
这里有一些很好的文章：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes#Flex_item_considerations
相邻弹性项目的边距不会折叠。使用自动边距 吸收垂直或水平方向的额外空间，并且可以 用于对齐或分隔相邻的弹性项目。见对齐 W3C Flexible Box Layout Model specification 中的“自动”边距 了解更多详情。
【讨论】：
那个“margin-top：auto”每次都让我着迷。以上是关于Flexbox 列：将多个项目对齐到顶部和底部？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章