CODEWITHSUNDEEP
htmlcssflexbox
Delowar Hosain
Delowar Hosain

Reputation: 2359

CSS: Items at the bottom of parent element

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:
enter image description here

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.

Upvotes: 0

Views: 101

Answers (2)

Paulie_D
Paulie_D

Reputation: 115285

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>

Upvotes: 2

klugjo
klugjo

Reputation: 20885

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>

Upvotes: 1

Related Questions