Can't push buttons to bottom of page in CSS-CodePudding

Been awhile since I played with Flexbox. I'm trying to push the buttons to the bottom of the page. Does the parent container always have to have a size to do that? That seems to be the only way I can get the result I want, but then I have to constantly resize based on what else is on the page. What else am I doing wrong?

.all {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

<h2>My lists</h2>
<div >
  <div ><button>Top</button></div>
  <div ><button>Midde</button></div>
  <div ><button>Bottom</button></div>
</div>

CodePudding user response：

Instead of using justify-content: flex-end; try to use justify-content: space-between;so that each element will be spread.

Also you need to set a min-height in the .alt class or the container in order to see the space-between in action.

CodePudding user response：

I think you should refresh your understanding about flexbox. use justify-content: space-between; instead of flex-end. I suggest you have a playaround flexbox in this link of w3schools https://www.w3schools.com/cssref/playdemo.asp?filename=playcss_justify-content&preval=flex-end

CodePudding user response：

As you mentioned in your question, you need to define a height from the area you want to align the elements.

Wrap your container

You need to define your parent container as to make the elements inside don't overflow the box itself. For that use: flex-wrap: wrap

Make the elements inside your container use the full width

By default flex will shrink the elements. to remove the defaults and use 100% of the width, use flex: 0 0 100%

Make your elements align itself

This is the key for your question. the elements needs to be aligned not with the other boxes, they have to align themselves. For that you must use align-self: flex-start, align-self: center or align-self: flex-end

Minimal Example

.all {
  display: flex;
  min-height: 100vh;
  flex-wrap: wrap;
}

/* This is going to make full width the divs inside .all */
.all div {
 flex: 0 0 100%;
}

.top {
  align-self: flex-start; 
}

.middle {
  align-self: center;
}

.bottom {
  align-self: flex-end;
}

<div >
    <div ><button>Top</button></div>
    <div ><button>Middle</button></div>
    <div ><button>Bottom</button></div>
  </div>