ディスプレイでの画像の位置/ divの高さflex

Question

私は、2つのボックスクラスのdivの位置をjustify-contentで指定したいと思います。flex-endですが、上記の残りのスペースに垂直方向にimg-container divを垂直に配置したいのですが、これが可能であれば、好ましくはjavascriptなしではわかりません。

レイアウトは、縦向きのモバイルデバイス向けです。コンテンツを正当化するのは最善のアプローチではないかもしれませんが、フォーム要素を画面の下部に配置して配置するレイアウトが欲しいですが、ロゴ領域からスペースを取って小さなデバイスに応答します。

.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>

Answer 1

あなたは、コードの少しだけを変更し、あなたが望むものを達成できます。

フィドル：だから、これは下のボックスと同じ性質を取る

<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> 

：https://jsfiddle.net/gczcorn0/

私はこのようになり、あなたのイメージコンテナを変更しました。その後、私はあなたがこれだけCSSをクリア画像ボックスのbackground-colorとborderをしたくないと仮定は次のように属性：

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

私はあなたはそれがより小型のデバイスで動作する方法によって何を意味するのかわからないんだけどこの例では幅が320pxに設定されているためです。コメントをもとに

EDIT：

この更新フィドルは、あなたがコメントで表現状況で何ができるかを示していますhttps://jsfiddle.net/gczcorn0/2/

Answer 2

あなたにもimg-containerにdisplay: flexを使用することができます。

.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{ 
 
    display: flex; 
 
    flex-flow: column nowrap; 
 
    justify-content: center; 
 
    flex: 1; 
 
} 
 

 
.img-container img { 
 
    margin: 0 auto; 
 
}

<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>