Flexbox 向右浮动

Question

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

在示例中，我想使用 Flexbox 使分数数字向右浮动。我想过使用：

 position: absolute;
right: 0;

但是问题是我们不能使用中心与外框对齐。

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

justifyContent: space-between;

做出预期的布局。

原文由 Martin Konicek 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用 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/

原文由 BitOfUniverse 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这会帮助你

 .parent {
  display: flex;
}

.child2 {
  margin-left: auto;
}

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

原文由 pradeep1991singh 发布，翻译遵循 CC BY-SA 3.0 许可协议