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; 
    }