如何在 flex 顯示中將文本與容器 div 的右側對齊？

Question

有人能幫我嗎？ 我想將“結束文本”與.Container的右側.Container ，以便與First name: John水平在同一行中。

（建議您在運行我的代碼時全屏檢查，因為在小窗口中您無法清楚地看到整個容器）

檢查圖像，這就是我想要的樣子：

 * { margin: 0; padding: 0; color: white; box-sizing: border-box; font-family: 'Poppins', sans-serif; font-weight: 700; } body { background-color: black; font-family: 'Poppins', sans-serif; overflow-x: hidden; height: 100%; padding: 0; margin: 0; } .Container { display: flex; align-items: center; margin: 0 auto; width: 75%; height: 250px; border-bottom: 2px solid white; } .Container span { color: white; font-size: 25px; margin-left: 30px; margin-right: 30px; } .dataContainer { font-size: 20px; display: inline-grid; line-height: 3rem; } .endtext { display: flex; justify-content: space-between; }

 <div class="Container"> <span>Data:</span> <div class="dataContainer"> <div class="endtext"> <p>First Name:  John</p>&nbsp; <p>End text</p> </div> <p>Last Name:  Williams</p> <p>Age:  23</p> </div> </div>

Answer 1

您快到了。 您必須告訴 flex 容器的某些子項“增長”以填充剩余空間。 將flex-grow: 1添加到.dataContainer 。

如果沒有增長，您可以看到紅色.dataContainer沒有填充父（藍色） .Container 。

添加flex-grow: 1 - 它如您所料填充父級：

Answer 2

由於您正在使用之間的空間，因此您需要使容器 100%

.dataContainer { width: 100%; }

 * { margin: 0; padding: 0; color: white; box-sizing: border-box; font-family: 'Poppins', sans-serif; font-weight: 700; } body { background-color: black; font-family: 'Poppins', sans-serif; overflow-x: hidden; height: 100%; padding: 0; margin: 0; } .Container { display: flex; align-items: center; margin: 0 auto; width: 75%; height: 250px; border-bottom: 2px solid white; } .Container span { color: white; font-size: 25px; margin-left: 30px; margin-right: 30px; } .dataContainer { font-size: 20px; display: inline-grid; line-height: 3rem; width: 100%; } .endtext { display: flex; justify-content: space-between; }

 <div class="Container"> <span>Data:</span> <div class="dataContainer"> <div class="endtext"> <p>First Name:  John</p>&nbsp; <p>End text</p> </div> <p>Last Name:  Williams</p> <p>Age:  23</p> </div> </div>