Flexbox向右浮动

Question

我正在寻找针对常见用例的Flexbox布局最佳实践的解决方案.

在示例中,我想使用Flexbox使得分数向右浮动.我想过使用:

position: absolute,
right: 0,

但问题是我们不能使用中心对齐外盒.

我能想到的另一种方法是制作另一个柔性盒来包装图像和命名部件,然后创建一个外部柔性盒来使用

justifyContent: 'space-between'

做出预期的布局.

这似乎是一个非常常见的UI范例,我想知道最佳实践是什么.非常感谢你!

Answer 1

这会对你有所帮助

.parent {
  display: flex;
}

.child2 {
  margin-left: auto;
}

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

Answer 2

使用这个很棒的指南来回答常见的Flexbox问题:https://css-tricks.com/snippets/css/a-guide-to-flexbox

伪代码:

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

这使得3个元素彼此相邻,Text占据了所有可用空间,因此ScoreNumber向右推动.

Answer 3

使用justify-content: space-between它将推动元素填充到侧面；

.flex {
 display: flex;
 justify-content: space-between;
}

.flex-grow {
  flex-grow: 1;
}

.one {
  border: 1px solid black;
  width: 20px; height: 20px;
}

.two {
  border: 1px solid black;
  width: 20px; height: 20px;
}

.three {
  border: 1px solid black;
  width: 20px; height: 20px;
}

Growing middle element
<div class="flex">
  <div class="one"></div><div class="two flex-grow"></div><div class="three"></div>
</div>

Without growing element
<div class="flex">
  <div class="one"></div><div class="two"></div><div class="three"></div>
</div>

Without middle element
<div class="flex">
  <div class="one"></div><div class="three"></div>
</div>

请参阅此惊人的教程以轻松了解flex box的行为：https : //css-tricks.com/snippets/css/a-guide-to-flexbox/