Flexbox佈局對齊內容

在我的腦海中似乎是這樣一個簡單的場景。Flexbox佈局對齊內容

我有一個容器div有兩個子元素，其中第一個應該出現在左上角，第二個應該顯示死中央。

我試過用在容器上的Flex的justify-content財產時使用space-between。

這將內容分割爲左上角和右上角。

右上角的元素需要向左拉，直到它死在中央。

我想不出一種方法來實現這一點。

我不想製作第三個隱藏元素，因爲這看起來像一個黑客。

#container { 
 
    display: flex; 
 
    justify-content: space-between; 
 
}

<div id="container"> 
 
    <div>TOP LEFT</div> 
 
    <div>DEAD CENTER</div> 
 
</div>

來源

2017-06-21 Derek

只需添加width: 50%;的容器，你是好去

#container { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    width: 50%; 
 
}

<div id="container"> 
 
    <div>TOP LEFT</div> 
 
    <div>DEAD CENTER</div> 
 
</div>

如果你想將第二項是完全在中心添加transform:translateX(50%);，這將根據其移動其寬度

#container{ 
 
    display:flex; 
 
    justify-content: space-between; 
 
    width: 50%; 
 
} 
 

 
#container div:nth-child(2){ 
 
    transform:translateX(50%); 
 
}

<div id="container"> 
 
    <div>TOP LEFT</div> 
 
    <div>DEAD CENTER</div> 
 
</div>

來源

2017-06-21 09:32:44 Chiller

Flexbox佈局對齊內容

回答

相關問題