使用flexbox將一個元素對齊頁面左上角和中間的一個元素

當我嘗試將一個元素放在左上角而另一個放在中間時，頂層元素不會一直放到剩下。我該如何做到這一點？使用flexbox將一個元素對齊頁面左上角和中間的一個元素

.Aligner { 
 
    background-color: blue; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    height: 200px; 
 
} 
 

 
.Aligner-item { 
 
    max-width: 50%; 
 
    background-color: green; 
 
} 
 

 
.Aligner-item--top { 
 
    align-self: flex-start; 
 
}

<div class="Aligner"> 
 
    <div class="Aligner-item Aligner-item--top">…</div> 
 
    <div class="Aligner-item">…</div> 
 
    <div class="Aligner-item Aligner-item--bottom">…</div> 
 
</div>

http://codepen.io/anon/pen/EVjzzo

來源

2015-09-09 Numbers

你如何期待這個看？ –

請發佈您的輸出樣機。我想泰勒就在這裏。 –

'justify-content：center;' - >'justify-content：space-between;'。查看[css技巧]（https://css-tricks.com/almanac/properties/j/justify-content/）瞭解更多信息。 – Lars

從MDN：

flex-start

柔性物品的橫開始緣邊緣與交叉啓動邊緣沖洗的林即

這意味着align-self: flex-start;將調整你top框的頂部邊緣與所述flex盒（十字軸的開頭）的頂部邊緣。

左/右值沿着主軸線。您可以在W3C規範中閱讀更多關於它的內容：https://drafts.csswg.org/css-align/#align-self-property

完成所需佈局的一種方法是使用position屬性。

請注意，position的添加將改變彎曲行爲;如果你願意的話，它就是一種「覆蓋」屬性。在絕對定位的框上應用align-self沿着包含塊的塊軸（在本例中爲y-axis）。

你可以看到絕對定位的柔性項目在這裏更多的信息：http://www.w3.org/TR/css3-flexbox/#abspos-items

.Aligner { 
 
    background-color: blue; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    height: 200px; 
 
    position: relative; /* new */ 
 
} 
 

 
.Aligner-item { 
 
    max-width: 50%; 
 
    background-color: green; 
 
} 
 

 
.Aligner-item--top { 
 
    align-self: flex-start; 
 
    left: 0; /* new */ 
 
    top: 0; /* new */ 
 
    position: absolute; /* new */ 
 
}

<div class="Aligner"> 
 
    <div class="Aligner-item Aligner-item--top">…</div> 
 
    <div class="Aligner-item">…</div> 
 
    <div class="Aligner-item Aligner-item--bottom">…</div> 
 
</div>

來源

2015-09-09 15:37:45 TylerH

@Paulie_D不錯，我應該澄清一點。 – TylerH

使用flexbox將一個元素對齊頁面左上角和中間的一個元素

回答

相關問題