Flexbox向右浮动

Question

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

在示例中，我想使用Flexbox将得分编号浮动到右侧。我想过使用：

position: absolute,
right: 0,

但问题是我们不能将中心对齐外盒。

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

justifyContent: 'space-between'

制作预期的布局。

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

Answer 1

这会对你有所帮助

＆＃13;

＆＃13;

.parent {
  display: flex;
}

.child2 {
  margin-left: auto;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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将填充元素填充到边上;

＆＃13;

＆＃13;

.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;
}

＆＃13;

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>

＆＃13;

＆＃13;

＆＃13;

请参阅这个神奇的教程，以便轻松了解弹性框的行为：https://css-tricks.com/snippets/css/a-guide-to-flexbox/