フレックスボックスで左下にdivを配置

Question

フレックスボックスを使用するとき、左下隅に要素を配置するのが難しいです。 本来、私は 'hello'テキストの直下（つまり、flexboxの左下）に 'world'テキストを表示させようとしています。

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>

Answer 1

あなたは後にしている何本か？私がしたことはフレックスカラムとしてもitemの表示を作って、追加の要素をカラムの下に置くことでした。 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>

Answer 2

itemタグにflex-direction: column;を追加します。また、パディングを削除すると、エッジが完全に一致します。これはすべての要素を保持する直接のコンテナです。絶対位置と相対位置を削除することもできます。 （https://jsfiddle.net/c5cbxw9q/1/）[すなわち]のよう

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>