如何在 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>