一个简单的 3 级 flex 布局，右下对齐答案

【问题标题】：a simple 3 level flex layout with bottom right alignment一个简单的 3 级 flex 布局，右下对齐
【发布时间】：2016-02-27 05:45:45
【问题描述】：

我需要制作一个灵活的标题，它采用 svg 徽标的计算高度并采用可用宽度以适应导航：

布局1：i.stack.imgur.com/Oa8gB.png

如果没有足够的空间将所有导航按钮 (a) 放在 svg 旁边的一行中，则导航块需要移动到 svg 下方并占据画布的整个宽度：

布局2：http://i.stack.imgur.com/2avAA.png

导航块与父标题元素的右下角对齐非常重要。

我阅读，谷歌搜索，尝试阅读更多......但没有令人满意的结果。对 flexbox 有什么建议吗？请不要js，希望保持纯净。

编辑： 这是我尝试过的：http://codepen.io/Kleajmp/pen/dYEeKW

html：

<header> 
      <div id="logo" class="col-3"><img src="http://www.dsunits.be/v4/img/DS_units.svg"></div>
  <nav>
    <a href="#">DS units</a>
    <a href="#">button2</a>
    <a href="#">button3</a>
    <a href="#">button4</a>
    <a href="#">button5</a>
    <a href="#">button6</a>
    <a href="#">button7</a>
    <a href="#">button8</a>
  </nav>
</header>

css：

header{ display:flex; align-items:flex-end; justify-content:space-between; }
div#logo{ display:inline-flex; align-items:flex-start; width:25%; }
div#logo img{ max-height:150px; }
nav{ display:inline-flex; cursor:pointer;  }
nav a{ display:inline-flex; flex-wrap:nowrap; }
nav a:hover{ color:white; background-color:#0099cc; border-top-right-radius:0.5rem; }

【问题讨论】：

您尝试过的任何代码都应该是您问题的一部分。 Stack Overflow 是一个问答服务，而不是代码编写服务。以下是一些指导方针：stackoverflow.com/help/how-to-ask
好的，我用我尝试过的方法添加了一个指向 codepen 的链接。

标签： css html layout svg flexbox

【解决方案1】：

好的...我不完全确定这应该如何工作，但我认为这与您所追求的很接近。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color: rgba(0, 0, 0, 0.2)
}
header {
  background-color: rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
}
#logo {
  flex-grow: 1;
  white-space: nowrap;
}
div#logo img {
  height: 150px;
}
nav {
  white-space: nowrap;
  flex-grow: 1;
  background: plum;
  display: flex;
  justify-content: space-between;
}
nav a {
  display: inline-block;
  color: black;
  text-transform: uppercase;
  text-decoration: none;
  padding: 8px;
  background-color: rgba(255, 255, 255, 0.9);
  line-height: 1rem;
}
nav a:hover {
  color: white;
  background-color: #0099cc;
  border-top-right-radius: 0.5rem;
}

<header>
  <div id="logo">
    <img src="http://www.dsunits.be/v4/img/DS_units.svg">
  </div>
  <nav>
    <a href="#">DS units</a>
    <a href="#">button2</a>
    <a href="#">button3</a>
    <a href="#">button4</a>
    <a href="#">button5</a>
    <a href="#">button6</a>
    <a href="#">button7</a>
    <a href="#">button8</a>
  </nav>
</header>

Codepen Demo

【讨论】：