CSS: Items at the bottom of parent element

Question

I can override align-items: flex-start with align-self: flex-end for a specific flex item, is there any way to override justify-content for a specific flex item?

I have a box with three child items and I need the last item ( item-3 ) at the bottom of my box ( flex_wrapper )

like this image:

Check my code please:

 .item-1{ background: red; } .item-2{ background: blue; } .item-3{ background: yellow; } .flex_wrapper{ background: #ddd; width: 400px; height: 300px; display: flex; flex-direction: column; justify-content: flex-start; } .flex_items{ padding: 10px; } 

 <div class="flex_wrapper"> <div class="flex_items item-1">Item 01</div> <div class="flex_items item-2">Item 02</div> <div class="flex_items item-3">Item 03</div> </div> 

Note: It is possible by using margin property or position property, but I have to use flex-box.

Answer 1

Yes, this is actually very simple, just give the element you want at the bottom margin-top:auto . No wrappers or extra elements required.

.item-3{

  margin-top:auto;
}

 .item-1 { background: red; } .item-2 { background: blue; } .item-3 { background: yellow; margin-top: auto; } .flex_wrapper { background: #ddd; width: 400px; height: 300px; display: flex; flex-direction: column; justify-content: flex-start; } .flex_items { padding: 10px; } 

 <div class="flex_wrapper"> <div class="flex_items item-1">Item 01</div> <div class="flex_items item-2">Item 02</div> <div class="flex_items item-3">Item 03</div> </div> 

Answer 2

You need to add an invisible item in between with flex-grow: 1 to occupy the space and push your 3rd item down:

 .item-1{ background: red; } .item-2{ background: blue; } .item-3{ background: yellow; } .flex_wrapper{ background: #ddd; width: 400px; height: 300px; display: flex; flex-direction: column; justify-content: flex-start; } .flex_items{ padding: 10px; } .separator { flex-grow: 1; } 

 <div class="flex_wrapper"> <div class="flex_items item-1">Item 01</div> <div class="flex_items item-2">Item 02</div> <div class="separator"></div> <div class="flex_items item-3">Item 03</div> </div>