缩放窗口时保持 3 个元素中的 2 个之间的距离相等（响应式）

Question

有 2 个 img div 相互重叠，旁边还有一个 div 中的流体标题徽标 (.svg)。

HTML：

<header class="site-header" role="banner" itemscope="itemscope" itemtype="http://schema.org/WPHeader"><div class="wrap"><div id="menu_container"><img src="http://95.85.63.245/wp-content/uploads/dynamik-gen/theme/images/Hamburger_optimized.svg" alt="menu"  class="menu-btn" /><div class="menu_spacer"></div><img src="http://95.85.63.245/wp-content/uploads/dynamik-gen/theme/images/searchicon.png" alt="zoek"  class="search_icon" /></div>


<div class="title-area"><h1 class="site-title" itemprop="headline"><a href="http://95.85.63.245/"></a></h1></div><div class="vr_menu_logo"><a href="/"><img src="http://95.85.63.245/wp-content/uploads/dynamik-gen/theme/images/logo_VR_font.svg"></a></div>
</div></header>

CSS：

.vr_menu_logo{
  max-width:95%; 
  float:left;
  margin-right:20px;
  }

#menu_container {
  max-width: 5%;
  float: right;
  }

  .menu-btn{
 cursor: pointer;
 max-height: 30px;
 max-width: 30px;
 margin-top:2em;
}

.menu_spacer{height:4em;}

.search_icon{
  cursor: pointer;
  max-height: 24px;
  max-width: 24px;
  }


.site-header .wrap {
  width: 1260px;
  }
.site-header .wrap {
  margin: 0 auto;
  padding: 0;
  float: none;
  overflow: hidden;
}

目标： 缩放浏览器窗口将使小汉堡和搜索图标分别与徽标的顶部和底部保持水平。实际上，这 3 个单独的项目应该作为一个标志。

在此处查看 cssdesk：http://www.cssdesk.com/JDyYQ

我希望一个最大高度的间隔 div 可以解决问题，或者 display:table-cell; 但我无法让它工作，有人有想法吗？ （javascript也可以是一个选项，但我认为CSS必须是可能的......）

Answer 1

这里是一个使用flexbox 的示例 - 请注意，这两个div 完全相同，只是有一个不同的height。这应该可以帮助您获得您想要实现的目标。显然，请检查您需要提供哪种浏览器支持，因为 flexbox 是一项相对较新的技术。

http://jsfiddle.net/zn50mmnu/

html:

<div class="flexy f1">
    <span class="menu">M</span>
    <span class="search">S</span>
</div>
<div class="flexy f2">
    <span class="menu">M</span>
    <span class="search">S</span>
</div>

css:

.flexy {
    float: right;
    clear: both;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 2px solid red;
    margin: 10px;
}

.f1 {
    height: 50px;
}

.f2 {
    height: 90px;
}

.menu {
    background: red;
    width: 1em;
}

.search {
    background: blue;
    width: 1em;
}