4

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.

Attempt #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%

Attempt #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

Problem

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.

epictetus
  • 41
  • 1
  • 3

1 Answers1

5

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.

Nico O
  • 13,762
  • 9
  • 54
  • 69