image positioning / div height with display flex

Question

I like the positioning of the two box class div's with justify-content: flex-end but I'd like to center the top img-container div vertically in the remaining space above but I'm not sure if this is possible, preferably without javascript.

The layout is for portrait orientation mobile devices. Maybe justifying the content isn't the best approach but I'd like a layout that places the form elements towards the bottom of the screen and spaces them well but responds to smaller devices by taking space from the logo area.

.flexcontainer {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;    
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    
    /*iPhone 4*/
    height: 480px;
    width:320px;
    /*iPhone 6*/
    /*height: 667px;
    width:375px;*/
    
    background-color: blue;
    border: 1px solid red;
}

.box {
  text-align:center;
    height: auto;
    width: 100%;
    background-color: green;
    border: 1px solid pink;
    margin: 3px;
    padding-top:20px;
    padding-bottom:20px;
    margin-top:20px;
    margin-bottom:20px;
}

.img-container{
  text-align:center;
}

<div class="flexcontainer">
<div class="img-container">
<img src='https://wiki.maemo.org/images/thumb/d/de/Maemo.org_logo_contest_sample1_bundyo.png/300px-Maemo.org_logo_contest_sample1_bundyo.png' width='80%'/>
</div>

<div class="box">
  <input type="text" placeholder="username">
  <br>
  <input type="password" placeholder="password">  
  <br>
  <button>submit</button>
</div>
<div class="box">
    <button>password reset</button>
    <br>
    <button>register</button>
</div>

</div>

thepio thepio · Accepted Answer · 2016-05-25T09:10:46

You could change just a little bit of code and achieve what you want.

Fiddle: https://jsfiddle.net/gczcorn0/

I just modified your image container to be like this:

<div class="box clear img-container">
  <img src='https://wiki.maemo.org/images/thumb/d/de/Maemo.org_logo_contest_sample1_bundyo.png/300px-Maemo.org_logo_contest_sample1_bundyo.png' width='80%'/>
</div>

So this takes the same properties as the boxes below. Then I assume you don't want the background-color and border on the image box so just clear the css attributes like this:

.box.clear {
  background-color: transparent;
  border: none;
}

I'm not sure what you meant by how you want it to behave in smaller devices since the width is set to 320px in the example.

EDIT based on comment:

This updated fiddle shows what you can do in a situation that you expressed in the comments: https://jsfiddle.net/gczcorn0/2/

image positioning / div height with display flex

2 Answers