flexbox align image to end of div

Question

I have a codepen of my header. How can I align the image to the right of my div?

I have tried justify-content: flex-end and align-items: flex-end

Answer 1

The way I see it you have 2 options.

1. remove flex:2 from the .right class and add margin-left:auto;
2. to the .right class add display: flex, align-items: flex-end; flex-direction: column (you also have that text that would need to be moved inside a class wrapper as the immediate child of the .right class.

I prefer option 1.

Answer 2

With the given code sample, and to right align the image in its parent, the align-items: flex-end is a flex container property and won't have any effect in the right rule.

The appropriate property for a flex item would be align-self, though as the direction is row, this will still not work since align-* properties affect the cross axis (vertically).

A simple solution is to remove align-items: flex-end from the right rule and instead make the div-container--right a flex container, use justify-content: flex-end to push its child, the image, to the right. That will work with the rest of the rules, and your original layout kept.

Stack snippet

.main-container{
     background-color: white;
     flex: 1;
     display: flex;
     flex-direction: row;
}

.left{
  flex: 2;
  background-color:white;
}

.right {
  flex: 2;
  /*align-items: flex-end;                      removed  */
}

.div-container {
  background-color: #90C3D4;
  height: 100px;
}

.div-container--left {
  border-bottom-left-radius: 10px;
  padding-left: 10px;
  margin-left: 10px;
}

.div-container--right {
  border-bottom-right-radius: 10px;
  padding-right: 10px;
  margin-right: 10px;
  
  display: flex;                            /*  added  */
  justify-content: flex-end;                /*  changed  */
  align-items: flex-start;                  /*  added, to avoid image to stretch  */
}

<div class='main-container'>
  <div class="left">
    <div class='div-container div-container--left'>
      <img src="http://www.mharrisweb.co.uk/images/calendarIcon.png" width="100" />
    </div>
    <div class='picker-container'>

    </div>
  </div>
  <div class="right">
    <div class='div-container div-container--right'>
      <img src="http://www.mharrisweb.co.uk/images/logoGreen.png" width="100" />
    </div>
    <div class='picker-container'>
      image above align right
    </div>
  </div>
</div>

---

Besides the above, here is a few more ways to align flex items:

• How to align groups of buttons on single row with Flex only?

• How to Center and Right-align on a row with CSS Flex only

• Center and right align flexbox elements

• Right align out the Float Property

Answer 3

An additional option to the good answer from Sten is to use absolute position. Example:

.right{
  position:absolute;
  right:0;
}