Question

我喜欢两个盒子类div的定位，其中包含了对齐内容：flex-end但我想将顶部的img-container div垂直放在上面的剩余空间中，但是我＆＃39 ;我不确定这是否可行，最好不要使用javascript。

布局适用于纵向移动设备。也许证明内容不是最好的方法，但我喜欢一种布局，将表单元素放在屏幕底部并将它们隔开，但通过从徽标区域占用空间来响应较小的设备。 / p>

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您可以更改一些代码并实现您想要的目标。

小提琴：https://jsfiddle.net/gczcorn0/

我刚刚将您的图片容器修改为：

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

所以这与下面的方框具有相同的属性。然后我假设您不希望图像框上有background-color和border，所以只需清除css属性，如下所示：

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

我不确定您希望它在较小的设备中的行为是什么意思，因为在示例中宽度设置为320px。

根据评论编辑：

这个更新的小提琴显示了您在评论中表达的情况下可以做的事情：https://jsfiddle.net/gczcorn0/2/

Answer 2

您也可以在display: flex上使用img-container。

＆＃13;

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

＆＃13;

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

＆＃13;

图像定位/ div高度与显示flex

2 个答案: