Flexbox：如何將元素粘貼到其容器的右端？

Question

我的意圖是有一個大廣場，裏面有兩個小廣場。

一個正方形（小左）應該粘在大方形的左端，另一個（小右）應該固定在右端。

這就是我得到：

你知道什麼是可以做出正確的小方堅持正確的？

請看看我寫的代碼：

.big { 
 
    display: flex; 
 
    width: 40vw; 
 
    height: 10vw; 
 
    border: solid; 
 
    flex-direction: row; 
 
} 
 

 
.small-right, 
 
.small-left { 
 
    width: 5vw; 
 
    height: 5vw; 
 
    border: solid; 
 
} 
 

 
.small-right { 
 
    align-items: flex-end; 
 
}

<div class="big"> 
 
    <div class="small-left"></div> 
 
    <div class="small-right"></div> 
 
</div>

您還可以看到在代碼筆代碼：https://codepen.io/CrazySynthax/pen/OmMxQw

Answer 1

你有很多選擇。這裏有三個：

• 添加justify-content: space-between到Flex容器，或者
• 添加margin-right: auto的首個柔性項目，或者
• 添加margin-left: auto到第二柔性項。

這裏的每個屬性是如何工作的解釋：

• Methods for Aligning Flex Items along the Main Axis

Answer 2

您可以使用保證金：

.big { 
 
    display: flex; 
 
    width: 40vw; 
 
    height: 10vw; 
 
    border: solid; 
 
    flex-direction: row; 
 
} 
 

 
.small-right, 
 
.small-left { 
 
    width: 5vw; 
 
    height: 5vw; 
 
    border: solid; 
 
} 
 

 
.small-right { 
 
    margin-top: auto; 
 
    margin-left: auto; 
 
}

<div class="big"> 
 
    <div class="small-left"></div> 
 
    <div class="small-right"></div> 
 
</div>

https://codepen.io/gc-nomade/pen/zwrEXo

Answer 3

試試這個

添加證明內容：空間之間到主分區。 刪除 - margin-top：auto;來自小型右班。

<div class="big"> 
     <div class="small-left"></div> 
     <div class="small-right"></div> 
    </div> 



    .big { 
     display: flex; 
     width: 40vw; 
     height: 10vw; 
     border: solid; 
     justify-content: space-between; 
    } 

    .small-right, 
    .small-left { 
     width: 5vw; 
     height: 5vw; 
     border: solid; 
    }