Flexbox對齊至div末尾

Question

如何使用flexbox將.right對齊至div的末尾？

我的CSS：

div { 
    display: flex; 
    border: 1px dotted black; 
} 
.right { 

} 

HTML：

<div> 
    <span>Left</span> 
    <span class="right">Right</span> 
</div> 

Codepen Link

感謝。

Answer 1

方式三：

1. 使用justify-content: space-between在容器上。

   div { 
       display: flex; 
       border: 1px dotted black; 
       justify-content: space-between; /* new */ 
   } 
   

   Revised Codepen

---

使用auto邊緣上的第一撓性項。

div > span:first-child { margin-right: auto; } 

Revised Codepen

---

使用auto邊緣上的第二撓性項。

.right { margin-left: auto; } 

Revised Codepen

---

對於justify-content和auto margins，用實例和說明一起解釋，看到這個帖子：Methods for Aligning Flex Items along the Main Axis

Answer 2

根據中的section 8.1，可以使用auto頁邊距來定位元素。

在這種情況下，您可以添加margin-left: auto以便將元素定位到右側。在這樣做的時候，任何積極的自由空間都會分配到元素的那一側，這樣可以有效地將它定位在右側，如下例所示。

div { 
 
    display: flex; 
 
    border: 1px dotted black; 
 
} 
 
.right { 
 
    margin-left: auto; 
 
}

<div> 
 
    <span>Left</span> 
 
    <span class="right">Right</span> 
 
</div>

Answer 3

使用margin-left: auto; margin-right: 0;使得元件被推向右側！還你一個錯字這裏：

<span class="righ">Right</span> 
<!---------------^ t missing. 

見工作片段：

div { 
 
    display: flex; 
 
    border: 1px dotted black; 
 
} 
 
.right { 
 
    margin-left: auto; 
 
    margin-right: 0; 
 
}

<div> 
 
    <span>Left</span> 
 
    <span class="right">Right</span> 
 
</div>