與流體頭左對齊，右對齊元素包裝和灌裝全高

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

* { 
 
    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; 
 
}

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