html - Flex- change position of child's child? -

i wish sit @ top, b sit in middle , c sit @ bottom.

jsfiddle

<div class="container">     <div class="a">a</div>     <div class="sub-container">         <div class="b">b</div>         <div class="c">c</div>     </div> </div> 

css:

.container{     display: flex;      flex-direction: column;     justify-content: space-between;     height: 100%;     position: fixed; } 

i need keep same markup - how can change position of div not immediate child of flex container?

edit:

it should this

a

b

c

the css display module level 3 introduces display: contents:

the element not generate boxes, children , pseudo-elements still generate boxes normal. purposes of box generation , layout, element must treated if had been replaced children , pseudo-elements in document tree.

you can use "ignore" subcontainer, , display inner items if belonged same container.

body { margin: 0 }  .container {    display: flex;     flex-direction: column;    justify-content: space-between;    height: 100%;    position: fixed;  }  .sub-container {    display: contents;  }

<div class="container">    <div class="a">a</div>    <div class="sub-container">      <div class="b">b</div>      <div class="c">c</div>    </div>  </div>

it's not supported yet, though.