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 出现在 window 的右上角，而 branding div 以剩余的 space在页面上；即我不希望品牌 div 在任何时候与联系人 div 重叠。

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

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

Answer 1

这是一种方法，不过我认为 CSS Grid Layouts 得到更好的支持后会更好。

lightgrey 背景只是为了表明品牌 div 实际上占据了 space 的其余部分。如您所见，没有重叠。

.content {
    display: flex;
    flex-direction: row-reverse;
}

.branding {
    width: 100%;
    background: lightgrey;
    text-align: center;
}

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

这里还有一个外部 JSFiddle。

Answer 2

你可以这样做：

列

CSS

.content {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row-reverse nowrap;
    flex-flow: row-reverse nowrap;
}
div {
    -webkit-flex: none;
    flex: none;
}
.branding {
    -webkit-flex: 1 0 auto;
    flex: 1 0 auto;
    align-items:center;
    text-align:center;
}

HTML

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

DEMO HERE

ROWS

CSS

.content {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: column nowrap;
    flex-flow: column nowrap;
}
div {
    -webkit-flex: none;
    flex: none;
}
.contact {   
    text-align:right;
}


.branding {
    -webkit-flex: 1 0 auto;
    flex: 1 0 auto;
    align-items:center;
    text-align:center;
}

HTML

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

DEMO HERE

Answer 3

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 出现在 window 的右上角，品牌 div 位于页面中央，并且任何时候都没有重叠.

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

Flexbox - different alignment for two elements

html

css