html - 使用 flexbox 垂直对齐文本

Question

flexbox 看起来应该让事情变得更简单，但我似乎无法让这个菜单中的文本链接和图像垂直对齐。文本链接和图像改为垂直和水平居中。少了什么东西？我可能也做完了，就好像我在使用表格和垂直对齐一样。我希望所有内容都对齐到底部。

* {
    padding: 0;
    margin: 0;
}

header > div {
    display: flex;
    position: relative;
}

header > div > a {
    border: solid 1px #000;
    float: left;
    align-self: flex-end;
    height: 279px;
    line-height: 279px;
}

header > div > ul {
    border: solid 1px #000;
    float: left;
    align-self: flex-end; 
    height: 279px;
    line-height: 279px;
}

header .menu li {
    display: inline-block;
    float: left;
    height: 279px;
    line-height: 279px;
}

header .menu li a {
    display: block;
    align-self: flex-end;
height: 279px;
line-height: 279px;
}

    <header>
        <div>
            <a href="#">
                <img src="http://eu2013.ie/media/eupresidency/content/imagegalleryitems/twitter-bird-blue-on-white-small.png" />
            </a>
            <ul class="menu">
                <li><a href="#">A</a></li>
                <li><a href="#">B</a></li>
                <li style="background: url('http://printready.co/wp-content/uploads/2012/08/facebook-like-icon-300x279.png') no-repeat; width: 300px; height: 279px;"></li>
            </ul>
        </div>
    </header>

https://jsfiddle.net/rpbwdvxe/1/

Answer 1

在 header > div 的 child 上设置 flex，并在其孙子上设置 align-self:

header > div {
  display: flex;
}

header > div > * {
  display: flex;
}

header > div > * > * {
  align-self: flex-end;    
}

Working Fiddle