帶有左對齊和右對齊元素的流體集管，包裹並填充整個高度

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演示

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