流体集管，左对齐和右对齐元素包裹并填充全高

Question

我有以下HTML：

<header>
  <h1>Curriculum Vitae</h1>
  <ul id="profile-menu">
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
</header>

以下SASS：

header {
  background-color: white;
}
header h1 {
  margin: 1em;
  display: inline-block;
}
header ul#profile-menu {
  margin: 1em;
  display: inline-block;
  float: right;
}
header ul#profile-menu li {
  display: inline;
}

它在大屏幕上呈现如下：

但是，我试图使标题流畅，以便ul#profile-menu将换行到下一行，标题将增长以适应两者的高度。但是，目前它是包装，但不是左对齐，标题没有填充高度。

我很想知道是否有一种没有媒体查询的方式，只需要在填充100％高度时以流畅的方式包裹。

Answer 1

Flexbox可以做到这一点。

Codepen Demo

docker run -it --rm myextendedimage sh -c "ls -la ba*"

# -rw-r--r--    1 root     root             4 Apr 14 10:18 bar
# -rw-r--r--    1 root     root             4 Apr 14 10:19 baz

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  background: lightblue;
}
h1 {
  flex: 1;
  white-space: nowrap;
}
ul {
  display: flex;
  list-style-type: none;
  align-items: center;
  white-space: nowrap;
}
li {
  padding-right: 1em;
}