父div是flex，子div是具有flex：1的列。 如何將右列的內容推到該列的右側？

Question

我試圖將第二列中的“ HELLO”推到該列的右側，而不更改第一列中“ HELLO”的位置。 實現此目的最簡單的方法是什么？

 .row { display: flex; } .column { flex: 1; } .slideshow-photos { width: 100%; height: 100%; object-fit: cover; } .mySlides { width: 100px; height: 100px; } 

 <div class='row'> <div class='column'> <p>HELLO</p> </div> <div class='column'> <div class="photos-container"> <div class="mySlides"> <img class='slideshow-photos' src="https://www.animalfriends.co.uk/app/uploads/2014/08/06110347/Kitten-small.jpg"> </div> </div< </div> </div> 

Answer 1

如果希望最后一列折疊，則可以使用last-of-type偽類將flex-grow值重置為0 。

 .row { display: flex; } .column { flex: 1; } .column:last-of-type { flex: 0; } .slideshow-photos { width: 100%; height: 100%; object-fit: cover; } .mySlides { width: 100px; height: 100px; } 

 <div class='row'> <div class='column'> <p>HELLO</p> </div> <div class='column'> <div class="photos-container"> <div class="mySlides"> <img class='slideshow-photos' src="https://www.animalfriends.co.uk/app/uploads/2014/08/06110347/Kitten-small.jpg"> </div> </div< </div> </div> 

Answer 2

試試這個代碼，它應該工作

 .row { display: flex; justify-content: space-between; } .column { /* not need flex 1 here*/ } 

 <div class='row'> <div class='column'> <p>HELLO</p> </div> <div class='column'> <p>HELLO</p> </div> </div>