定位的div留下了Flexbox的

我遇到一些困難，利用Flexbox的時候在左下角定位的元素。基本上我試圖讓「世界」的文字出現正下方的「你好」文本（即在實現Flexbox的左下角）。定位的div留下了Flexbox的

rel { 
 
    position: relative; 
 
    background: rgba(255, 0, 0, 0.5); 
 
    padding: 5px; 
 
    margin-top: auto; 
 
} 
 
abs { 
 
    position: absolute; 
 
    background: rgba(0, 255, 0, 0.5); 
 
    padding: 5px; 
 
} 
 
column { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
item { 
 
    display: flex; 
 
    align-items: center; 
 
    flex: auto; 
 
    border: 1px solid blue; 
 
}

<column> 
 
    <item> 
 
    hello 
 
    <br>hello 
 
    <br>hello 
 
    <br>hello 
 
    <br> 
 
    <rel> 
 
     <abs> 
 
     world 
 
     <br/>world 
 
     <br/>world 
 
     <br/>world 
 
     <br/> 
 
     </abs> 
 
    </rel> 
 
    </item> 
 
</column>

來源

2016-11-20 Robbie

喜歡[即（https://jsfiddle.net/c5cbxw9q/1/）？ – pol

這可以幫助：http://stackoverflow.com/a/33856609/3597276 –

這是你以後在做什麼？我所做的就是將item顯示爲flex列，這也會使其他元素成爲列。還加上align-items: flex-start;到column，以便它們正確對齊。您也可以移除不需要的位置屬性。

Live Demo on jsfiddle, snippet below.

CSS改變

column { 
    display: flex; 
    flex-direction: column; 
    align-items: flex-start; 
} 

item { 
    display: flex; 
    align-items: center; 
    flex: auto; 
    flex-direction: column; 
    border: 1px solid blue; 
}

片段

rel{ 
 
    background:rgba(255,0,0,0.5); 
 
    padding:5px; 
 
} 
 

 
abs{ 
 
    background:rgba(0,255,0,0.5); 
 
    padding:5px; 
 
} 
 

 
column { 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: flex-start; 
 
} 
 

 
item { 
 
    display: flex; 
 
    align-items: center; 
 
    flex: auto; 
 
    flex-direction: column; 
 
    border: 1px solid blue; 
 
}

<column> 
 
\t <item> 
 
\t \t hello<br> 
 
\t \t hello<br> 
 
\t \t hello<br> 
 
\t \t hello<br> 
 
\t \t <rel> 
 
\t \t \t <abs> 
 
\t \t \t \t world<br/> 
 
\t \t \t \t world<br/> 
 
\t \t \t \t world<br/> 
 
\t \t \t \t world<br/> 
 
\t \t \t </abs> 
 
\t \t </rel> 
 
\t </item> 
 
</column>

來源

2016-11-20 03:30:04 Loktar

雖然這並得到想要的結果，我需要絕對定位爲「世界」將超過其他文本，不應該打擾內容。 – Robbie

@Robbie所以這樣的事情？ https://jsfiddle.net/c5cbxw9q/3/你剛剛添加'絕對'回來？ – Loktar

是的，我甚至沒有想到整個事情是現在相對柔性箱，所以你需要的一切都改變相對於絕對的。 – Robbie

添加flex-direction: column;到item標籤。還刪除填充將完美匹配的邊緣。這是容納所有元素的直接容器。你也可以刪除絕對和相對位置。

rel { 
 
    background: rgba(255, 0, 0, 0.5); 
 
    padding: 5px; 
 
} 
 
abs { 
 
    background: rgba(0, 255, 0, 0.5); 
 
} 
 
column { 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: flex-start; 
 
} 
 
item { 
 
    display: flex; 
 
    align-items: center; 
 
    flex: auto; 
 
    flex-direction: column; 
 
    border: 1px solid blue; 
 
}

<column> 
 
    <item> 
 
    hello 
 
    <br>hello 
 
    <br>hello 
 
    <br>hello 
 
    <br> 
 
    <rel> 
 
     <abs> 
 
     world 
 
     <br/>world 
 
     <br/>world 
 
     <br/>world 
 
     <br/> 
 
     </abs> 
 
    </rel> 
 
    </item> 
 
</column>

來源

2016-11-20 03:31:36

定位的div留下了Flexbox的

回答

相關問題