Flexbox float right

Question

Tôi đang tìm các giải pháp về cách bố trí tốt nhất cho bố cục Flexbox cho một trường hợp sử dụng phổ biến.

Trong ví dụ này, tôi muốn sử dụng Flexbox để làm cho số điểm là phao bên phải. Tôi đã nghĩ đến việc sử dụng:

position: absolute, 
right: 0, 

Nhưng sau đó vấn đề là chúng tôi không thể sử dụng trung tâm căn chỉnh với hộp bên ngoài.

Một cách khác tôi có thể nghĩ đến là làm cho một hộp flex để bọc các hình ảnh và tên phần, sau đó tạo ra một hộp flex bên ngoài để sử dụng

justifyContent: 'space-between' 
to make the expected layout. 

Điều này có vẻ giống như một mô hình giao diện người dùng rất phổ biến Tôi tự hỏi những gì thực hành tốt nhất là. Cảm ơn nhiều!

Answer 1

Sử dụng hướng dẫn tuyệt vời này để trả lời câu hỏi Flexbox chung: https://css-tricks.com/snippets/css/a-guide-to-flexbox

Mã giả:

<View style={{flexDirection: 'row', alignItems: 'center'}}> 
    <ProfilePicture /> 
    <Text style={{flex: 1}}>{username}</Text> 
    <ScoreNumber /> 
</View> 

này ám chỉ rằng 3 yếu tố cạnh nhau, với Text chiếm tất cả các không gian có sẵn, do đó đẩy ScoreNumber ở bên phải.

Answer 2

này sẽ giúp bạn

.parent { 
 
    display: flex; 
 
} 
 

 
.child2 { 
 
    margin-left: auto; 
 
}

<div class="parent"> 
 
    <div class="child1">left</div> 
 
    <div class="child2">right</div> 
 
</div>