html - How do I get a flexbox to have a center fixed and a bottom fixed children together? -

i trying layout of following kind via flexbox.

|                      | |                      | | center fixed element | |                      | | bottom fixed element | 

this rough flexbox css.

.wrapper{     display:flex;     justify-content:center;     flex-direction:column; } .bottom-element {     align-self:flex-end; } 

the idea behind inside wrapper center aligned , .bottom-element align bottom of box.

this doesn't work expected , bottom element appears right after center element.

any other way solved? or silly might have missed?

the idea creating empty placeholder top element css pseudo content, , use flex-direction: column; + justify-content: space-between; align 3 elements vertically.

.wrapper {      height: 100px;      width: 100px;      display: flex;      flex-direction: column;      justify-content: space-between;      border: 1px solid red;  }  .wrapper:before {      content: "\00a0";  }  .wrapper > div {      background: aqua;  }

<div class="wrapper">      <div>middle</div>      <div>bottom</div>  </div>

note, middle div might not absolutely in middle when comes multiple lines of text in flex items.