html - Flexbox - 两个元素的不同对齐方式

Question

我有以下标记:

.content {
  display: flex;
}

<div class="content">
  <div class="contact">email@example.com</div>

  <div class="branding">
    <h1>Name</h1>
    <img src="http://lorempixel.com/200/200" />
  </div>

</div>

我基本上希望 contact div 出现在窗口的右上角，而 branding div 位于页面剩余空间的中心；即我不希望品牌 div 在任何时候都与联系人 div 重叠。

我如何使用 flexbox 实现这一点？

更新:这是所需布局的示例:

Answer 1

I essentially want the contact div to appear top-right of the window and the branding div to be centered on the remaining space on the page; i.e. I don't want the branding div to overlap the contact div at any point.

CSS

html, body { height: 100%; } /* enable percentage height for flex container */

.content {
    display: flex;
    flex-direction: column;
    height: 100%; /* give the flex container a height */
}

.contact {
    align-self: flex-end; /* align-right */
}

.branding {
    margin: auto; /* center branding div in container */
}

DEMO

通过上面的代码，联系人div出现在窗口的右上角，品牌div在页面居中，任何时候都没有重叠.