Question

我有以下标记：

inputView

.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> div显示在窗口的右上角，contact div以页面上的剩余空间为中心;即我不希望品牌div在任何时候与接触div重叠。

我如何使用flexbox实现这一目标？

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

Answer 1

这是实现目标的一种方法，但我认为CSS Grid Layouts得到更好的支持会更好。

lightgrey背景只是为了表明品牌div实际占据了剩下的空间。如您所见，没有重叠。

＆＃13;

.content {
    display: flex;
    flex-direction: row-reverse;
}

.branding {
    width: 100%;
    background: lightgrey;
    text-align: center;
}

＆＃13;

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

＆＃13;

这里也是外部JSFiddle。

Answer 2

我基本上希望联系人div显示在窗口的右上角品牌div以中心的剩余空间为中心页;即我不希望品牌div与联系人div重叠任何一点。

<强> 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会在页面的中心位置，并且任何时候都不会重叠。

Answer 3

你可以这样做：

<强>列

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

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

3 个答案: