次の行要素を、前の行の右上の要素に近づける方法、負のマージンなし？

Question

は、私は3つの要素は行内の2により、フレックスコンテナに包まれています：

<div class="container"> 
    <div class="elem-1">a</div> 
    <div class="elem-2">b</div> 
    <div class="elem-3">c</div> 
</div> 

最後の行要素はhtmlコードを編集し、負のマージンを使用せずに、右上の要素を閉じてプッシュする方法はありますか？

このダミーのCSSコードは、私が取得したいものを示していますが、私は最後の一番上の要素にそれを押していますelem-3にこの負のマージンを持つ負のマージン

.container { 
    display:flex; 
    width:205px; 
    flex-wrap:wrap; 
    align-items:flex-start; 
} 
.elem-1 { 
    width:100px; 
    border:1px solid black; 
    height:100px; 

} 

.elem-2 { 
    width:100px; 
    border:1px solid black; 
    height:50px; 
} 

.elem-3 { 
    width:100px; 
    border:1px solid black; 
    height:100px; 
    margin-left:102px; // push element to the right 
    margin-top:-50px; // push to the top 
} 

せずに、方法がありますそれを避けるためにまだ浮かんではなく、フレックスボックスを使用する？

結果は私が取得しよう：

jsfiddle https://jsfiddle.net/j51o1cup/

Answer 1

いいえ、これだけではコンテンツと動的コンテンツとフレキシボックスを使用して行うことはできません。

あなたはcontainer上の高さを設定することができた場合は、ここで疑似elem-1とelem-2の間で注文することができるようにすることで、新しい列

からelem-2とelem-3をプッシュする擬似要素を使って、トリックです、我々はそれが完全な高さであると言うことができます。そのように行われた場合、それが正しい、これはとてもフレキシボックスで「石工」、例のように感じている

.container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-wrap: wrap; 
 
    align-items: flex-start; 
 
    height: 100vh; 
 
    width: 205px; 
 
} 
 

 
.container::before { 
 
    content: ''; 
 
    height: 100%; 
 
    order: 1; 
 
} 
 

 
.elem-1 { 
 
    width: 100px; 
 
    border: 1px solid black; 
 
    height: 100px; 
 
} 
 

 
.elem-2 { 
 
    width: 100px; 
 
    border: 1px solid black; 
 
    height: 50px; 
 
    order: 2; 
 
} 
 

 
.elem-3 { 
 
    width: 100px; 
 
    border: 1px solid black; 
 
    height: 100px; 
 
    order: 2; 
 
}

<div class="container"> 
 
    <div class="elem-1">a</div> 
 
    <div class="elem-2">b</div> 
 
    <div class="elem-3">c</div> 
 
</div>