如何對齊3個兄弟元素，左邊2和右邊1，而不使用額外的div

Question

我想對齊像圖像中的3個兄弟元素，有沒有辦法用flexbox來實現？我之前完成了它，但沒有把它們全部作爲兄弟姐妹，我的意思是我習慣將左邊的兩個元素包裝在div中，並讓它位於包裝外部的右邊，但現在我一直試圖如果沒有包裝其中的任何一個來獲得更大的靈活性，那就做吧

規則：

1）兄弟元素

2）的所有元素應該有獨立的高度，這取決於該內容。

div{ 
 
    background: #000; 
 
    color: #fff; 
 
    margin-top: 5px; 
 
    min-height: 50px; 
 
}

<div class="parent"> 
 
    <div class="sibling-1">Sibling 1</div> 
 
    <div class="sibling-2">Sibling 2</div> 
 
    <div class="sibling-3">Sibling 3</div> 
 
</div>

Answer 1

你不能這樣做，如果沒有一些限制。

與CSS最接近的是，在parent上設置固定的height，並將最後一個div的包裝設置爲100％的高度。

不過，只要內容的左側得到大於視它將自動換行，並控制您將需要一個腳本，調整家長的高度，以適應他們的總高度。

作爲一個側面說明，如果你在這個答案我的一個小竅門一樣，你可以很容易地克服在正在使用的列包裝問題：add-scroll-to-each-column-in-css-grid-layout

html, body { 
 
    margin: 0; 
 
} 
 
.parent { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-wrap: wrap; 
 
    height: 100vh; 
 
    overflow: auto; 
 
} 
 
.wrapper { 
 
    height: 100%; 
 
    width: 50%; 
 
} 
 
.sibling { 
 
    width: 50%; 
 
    background-color: blue; 
 
} 
 
.wrapper .sibling { 
 
    width: 100%; 
 
} 
 
.sibling.nr2 { 
 
    background-color: green; 
 
} 
 
.sibling.nr1 { 
 
    background-color: red; 
 
}

<div class="parent"> 
 
    <div class="sibling nr1"> 
 
     Sibling 1<br> 
 
     Sibling 1<br> 
 
     Sibling 1<br> 
 
     Sibling 1<br> 
 
     Sibling 1<br> 
 
     Sibling 1<br> 
 
    </div> 
 
    <div class="sibling nr2"> 
 
     Sibling 2<br> 
 
     Sibling 2<br> 
 
     Sibling 2<br> 
 
     Sibling 2<br> 
 
     Sibling 2<br> 
 
    </div> 
 
    <div class="wrapper"> 
 
     <div class="sibling nr3"> 
 
     Sibling 3<br> 
 
     Sibling 3<br> 
 
     Sibling 3<br> 
 
     Sibling 3<br> 
 
     Sibling 3<br> 
 
     Sibling 3<br> 
 
     Sibling 3<br> 
 
     Sibling 3<br> 
 
     Sibling 3<br> 
 
     Sibling 3<br> 
 
     Sibling 3<br> 
 
     Sibling 3<br> 
 
     Sibling 3<br> 
 
     Sibling 3<br> 
 
     Sibling 3<br> 
 
     </div> 
 
    </div> 
 
</div>