CSS Flexbox 向右浮动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36601231/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Flexbox float right
提问by Martin Konicek
I am looking for solutions on Flexbox layout best practice for a common use case.
我正在寻找有关常见用例的 Flexbox 布局最佳实践的解决方案。
In the example, I want to use Flexbox to make the score number to be float to the right. I thought of using:
在示例中，我想使用 Flexbox 使分数编号向右浮动。我想过使用：
position: absolute,
right: 0,
But then the problem is that we can't use the center align with the outer box.
但是接下来的问题是我们不能使用中心与外框对齐。
Another way I can think of is to make another flex box to wrap the image and name part, then create an outer flex box to use
我能想到的另一种方法是制作另一个flex box来包装图像和名称部分，然后创建一个外部flex box来使用
justifyContent: 'space-between'
to make the expected layout.
做出预期的布局。
This seems like a very common UI paradigm I wonder what the best practice is. Thank you very much!
这似乎是一个非常常见的 UI 范例，我想知道最佳实践是什么。非常感谢！
采纳答案by BitOfUniverse
Use justify-content: space-betweenit fill push elements to the sides;
使用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>Refer to this amazing tutorial to easily understand how flex box behaves: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
参考这个神奇的教程来轻松理解 flex box 的行为：https: //css-tricks.com/snippets/css/a-guide-to-flexbox/
回答by pradeep1991singh
This will help you
这会帮助你
.parent {
display: flex;
}
.child2 {
margin-left: auto;
}<div class="parent">
<div class="child1">left</div>
<div class="child2">right</div>
</div>回答by Martin Konicek
Use this awesome guide to answer common Flexbox questions: https://css-tricks.com/snippets/css/a-guide-to-flexbox
使用这个很棒的指南来回答常见的 Flexbox 问题：https://css-tricks.com/snippets/css/a-guide-to-flexbox
Pseudocode:
伪代码：
<View style={{flexDirection: 'row', alignItems: 'center'}}>
<ProfilePicture />
<Text style={{flex: 1}}>{username}</Text>
<ScoreNumber />
</View>
This renders the 3 elements next to each other, with the Textoccupying all the available space, therefore pushing the ScoreNumberto the right.
这使得 3 个元素彼此相邻，Text占据所有可用空间，因此将 推ScoreNumber到右侧。
