如何在 flex 显示中将文本与容器 div 的右侧对齐？

Question

can someone help me? I want to align the "End text" to the right side of the .Container to be horizontally in the same row with the First name: John .

(Recommend you when run my code to check in full screen,because you can't see well the whole container in a small window )

Check the image,this is how I want to look like:

 * { 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

You're almost there. You have to tell certain children of a flex container to "grow" to fill in the remaining space. Add flex-grow: 1 to the .dataContainer .

Without the grow, you can see that the red .dataContainer doesn't fill the parent (blue) .Container .

After adding flex-grow: 1 - it fills the parent as you would expect:

Answer 2

Since you are using space between you need to make the container 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>