与流体头左对齐，右对齐元素包装和灌装全高

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>