Menu
I would like to align a set of elements to the top of a flexbox column, and another set of elements to the bottom of a flexbox column -- with only space dividing the two sets.
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%
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
In Attempt #1 the div "align-bottom" is not aligned to the end of the column.
In Attempt #2 the div "align-bottom" is aligned to the bottom, however when the browser is resized the div "bottom-wrapper" can cover up half of the "circular" div above it. I would like the "bottom-wrapper" div not to overlap any other divs when resized (i.e., it should be pushed off the screen).
Please let me know how I can align the bottom div to the end of the column and not overlap other divs when the browser is resized.
519
asked Oct 30 '25 17:10
You need to append margin-top: auto; to your .bottom class.
Here is your forked demo: http://codepen.io/anon/pen/aOEKga
Here is some nice write up of this: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes#Flex_item_considerations
The margins of adjacent flex items do not collapse. Using auto margins absorbs extra space in the vertical or horizontal direction and can be used for alignment or to separate adjacent flex items. See Aligning with 'auto' margins in the W3C Flexible Box Layout Model specification for more details.
97
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
