一个简单的 3 级弹性布局，右下对齐

Question

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

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

如果没有足够的 space 来容纳 svg 旁边一行中的所有导航按钮 (a)，则导航块需要移动到 svg 下方并占用 [=42] 的整个宽度=]:

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

导航块与 parent header 元素的右下角对齐非常重要。

我阅读、搜索、尝试并阅读更多...但没有令人满意的结果。对 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; }

Answer 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

一个简单的 3 级弹性布局，右下对齐

a simple 3 level flex layout with bottom right alignment

html

css

layout

svg

flexbox