Flexbox float right
I am looking for solutions on Flexbox layout best practice for a common use case.
In the example, I want to use Flexbox to make the score number to be float to the right. I thought of using:
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
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!
css css3 react-native flexbox
edited Nov 24 '18 at 4:30
Zano
2,2362330
asked Apr 13 '16 at 14:17
Martin KonicekMartin Konicek
23.9k156681
add a comment |
I am looking for solutions on Flexbox layout best practice for a common use case.
In the example, I want to use Flexbox to make the score number to be float to the right. I thought of using:
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
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!
css css3 react-native flexbox
edited Nov 24 '18 at 4:30
Zano
2,2362330
asked Apr 13 '16 at 14:17
Martin KonicekMartin Konicek
23.9k156681
3
Consider flexautomargins: stackoverflow.com/a/33856609/3597276
– Michael_B
Apr 13 '16 at 14:24
add a comment |
I am looking for solutions on Flexbox layout best practice for a common use case.
In the example, I want to use Flexbox to make the score number to be float to the right. I thought of using:
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
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!
css css3 react-native flexbox
edited Nov 24 '18 at 4:30
Zano
2,2362330
asked Apr 13 '16 at 14:17
Martin KonicekMartin Konicek
23.9k156681
I am looking for solutions on Flexbox layout best practice for a common use case.
In the example, I want to use Flexbox to make the score number to be float to the right. I thought of using:
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
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!
css css3 react-native flexbox
css css3 react-native flexbox
edited Nov 24 '18 at 4:30
Zano
2,2362330
asked Apr 13 '16 at 14:17
Martin KonicekMartin Konicek
23.9k156681
edited Nov 24 '18 at 4:30
Zano
2,2362330
asked Apr 13 '16 at 14:17
Martin KonicekMartin Konicek
23.9k156681
edited Nov 24 '18 at 4:30
Zano
2,2362330
edited Nov 24 '18 at 4:30
Zano
2,2362330
edited Nov 24 '18 at 4:30
Zano
2,2362330
2,2362330
asked Apr 13 '16 at 14:17
Martin KonicekMartin Konicek
23.9k156681
asked Apr 13 '16 at 14:17
Martin KonicekMartin Konicek
23.9k156681
asked Apr 13 '16 at 14:17
Martin KonicekMartin Konicek
23.9k156681
23.9k156681
3
Consider flexautomargins: stackoverflow.com/a/33856609/3597276
– Michael_B
Apr 13 '16 at 14:24
add a comment |
3
Consider flexautomargins: stackoverflow.com/a/33856609/3597276
– Michael_B
Apr 13 '16 at 14:24
3
3
Consider flex
auto margins: stackoverflow.com/a/33856609/3597276– Michael_B
Apr 13 '16 at 14:24
Consider flex
auto margins: stackoverflow.com/a/33856609/3597276– Michael_B
Apr 13 '16 at 14:24
add a comment |
3 Answers
3
active
oldest
votes
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>edited Jan 5 '18 at 14:44
Paweł Gościcki
5,38954567
answered Apr 13 '16 at 18:30
pradeep1991singhpradeep1991singh
4,23921628
add a comment |
Use this awesome guide to answer common Flexbox questions: 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 Text occupying all the available space, therefore pushing the ScoreNumber to the right.
answered Apr 13 '16 at 14:17
Martin KonicekMartin Konicek
23.9k156681
1
What is the shorthandflex: 1mean? Is this the same asflex-grow: 1?
– styfle
May 11 '17 at 13:18
A bit late but yes, it's the shorthand forflex-grow: 1. It can be extended asflex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ].
– Daniel B
Jan 29 '18 at 13:52
it doesn't work if you remove middle element.justify-content: space-betweenshould be used to achieve that instead.
– BitOfUniverse
Apr 2 '18 at 23:20
add a comment |
Use justify-content: space-between it fill push elements to the sides;
.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/
answered Apr 2 '18 at 23:29
BitOfUniverseBitOfUniverse
4,56112534
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f36601231%2fflexbox-float-right%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
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>edited Jan 5 '18 at 14:44
Paweł Gościcki
5,38954567
answered Apr 13 '16 at 18:30
pradeep1991singhpradeep1991singh
4,23921628
add a comment |
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>edited Jan 5 '18 at 14:44
Paweł Gościcki
5,38954567
answered Apr 13 '16 at 18:30
pradeep1991singhpradeep1991singh
4,23921628
add a comment |
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>edited Jan 5 '18 at 14:44
Paweł Gościcki
5,38954567
answered Apr 13 '16 at 18:30
pradeep1991singhpradeep1991singh
4,23921628
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>.parent {
display: flex;
}
.child2 {
margin-left: auto;
}<div class="parent">
<div class="child1">left</div>
<div class="child2">right</div>
</div>.parent {
display: flex;
}
.child2 {
margin-left: auto;
}<div class="parent">
<div class="child1">left</div>
<div class="child2">right</div>
</div>edited Jan 5 '18 at 14:44
Paweł Gościcki
5,38954567
answered Apr 13 '16 at 18:30
pradeep1991singhpradeep1991singh
4,23921628
edited Jan 5 '18 at 14:44
Paweł Gościcki
5,38954567
edited Jan 5 '18 at 14:44
Paweł Gościcki
5,38954567
edited Jan 5 '18 at 14:44
Paweł Gościcki
5,38954567
5,38954567
answered Apr 13 '16 at 18:30
pradeep1991singhpradeep1991singh
4,23921628
answered Apr 13 '16 at 18:30
pradeep1991singhpradeep1991singh
4,23921628
answered Apr 13 '16 at 18:30
pradeep1991singhpradeep1991singh
4,23921628
4,23921628
add a comment |
add a comment |
Use this awesome guide to answer common Flexbox questions: 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 Text occupying all the available space, therefore pushing the ScoreNumber to the right.
answered Apr 13 '16 at 14:17
Martin KonicekMartin Konicek
23.9k156681
1
What is the shorthandflex: 1mean? Is this the same asflex-grow: 1?
– styfle
May 11 '17 at 13:18
A bit late but yes, it's the shorthand forflex-grow: 1. It can be extended asflex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ].
– Daniel B
Jan 29 '18 at 13:52
it doesn't work if you remove middle element.justify-content: space-betweenshould be used to achieve that instead.
– BitOfUniverse
Apr 2 '18 at 23:20
add a comment |
Use this awesome guide to answer common Flexbox questions: 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 Text occupying all the available space, therefore pushing the ScoreNumber to the right.
answered Apr 13 '16 at 14:17
Martin KonicekMartin Konicek
23.9k156681
1
What is the shorthandflex: 1mean? Is this the same asflex-grow: 1?
– styfle
May 11 '17 at 13:18
A bit late but yes, it's the shorthand forflex-grow: 1. It can be extended asflex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ].
– Daniel B
Jan 29 '18 at 13:52
it doesn't work if you remove middle element.justify-content: space-betweenshould be used to achieve that instead.
– BitOfUniverse
Apr 2 '18 at 23:20
add a comment |
Use this awesome guide to answer common Flexbox questions: 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 Text occupying all the available space, therefore pushing the ScoreNumber to the right.
answered Apr 13 '16 at 14:17
Martin KonicekMartin Konicek
23.9k156681
Use this awesome guide to answer common Flexbox questions: 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 Text occupying all the available space, therefore pushing the ScoreNumber to the right.
answered Apr 13 '16 at 14:17
Martin KonicekMartin Konicek
23.9k156681
edited Feb 9 '17 at 20:25
answered Apr 13 '16 at 14:17
Martin KonicekMartin Konicek
23.9k156681
answered Apr 13 '16 at 14:17
Martin KonicekMartin Konicek
23.9k156681
answered Apr 13 '16 at 14:17
Martin KonicekMartin Konicek
23.9k156681
23.9k156681
1
What is the shorthandflex: 1mean? Is this the same asflex-grow: 1?
– styfle
May 11 '17 at 13:18
A bit late but yes, it's the shorthand forflex-grow: 1. It can be extended asflex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ].
– Daniel B
Jan 29 '18 at 13:52
it doesn't work if you remove middle element.justify-content: space-betweenshould be used to achieve that instead.
– BitOfUniverse
Apr 2 '18 at 23:20
add a comment |
1
What is the shorthandflex: 1mean? Is this the same asflex-grow: 1?
– styfle
May 11 '17 at 13:18
A bit late but yes, it's the shorthand forflex-grow: 1. It can be extended asflex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ].
– Daniel B
Jan 29 '18 at 13:52
it doesn't work if you remove middle element.justify-content: space-betweenshould be used to achieve that instead.
– BitOfUniverse
Apr 2 '18 at 23:20
1
1
What is the shorthand
flex: 1 mean? Is this the same as flex-grow: 1?– styfle
May 11 '17 at 13:18
What is the shorthand
flex: 1 mean? Is this the same as flex-grow: 1?– styfle
May 11 '17 at 13:18
A bit late but yes, it's the shorthand for
flex-grow: 1. It can be extended as flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ].– Daniel B
Jan 29 '18 at 13:52
A bit late but yes, it's the shorthand for
flex-grow: 1. It can be extended as flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ].– Daniel B
Jan 29 '18 at 13:52
it doesn't work if you remove middle element.
justify-content: space-between should be used to achieve that instead.– BitOfUniverse
Apr 2 '18 at 23:20
it doesn't work if you remove middle element.
justify-content: space-between should be used to achieve that instead.– BitOfUniverse
Apr 2 '18 at 23:20
add a comment |
Use justify-content: space-between it fill push elements to the sides;
.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/
answered Apr 2 '18 at 23:29
BitOfUniverseBitOfUniverse
4,56112534
add a comment |
Use justify-content: space-between it fill push elements to the sides;
.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/
answered Apr 2 '18 at 23:29
BitOfUniverseBitOfUniverse
4,56112534
add a comment |
Use justify-content: space-between it fill push elements to the sides;
.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/
answered Apr 2 '18 at 23:29
BitOfUniverseBitOfUniverse
4,56112534
Use justify-content: space-between it fill push elements to the sides;
.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 {
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 {
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>answered Apr 2 '18 at 23:29
BitOfUniverseBitOfUniverse
4,56112534
answered Apr 2 '18 at 23:29
BitOfUniverseBitOfUniverse
4,56112534
answered Apr 2 '18 at 23:29
BitOfUniverseBitOfUniverse
4,56112534
answered Apr 2 '18 at 23:29
BitOfUniverseBitOfUniverse
4,56112534
4,56112534
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f36601231%2fflexbox-float-right%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
3
Consider flex
automargins: stackoverflow.com/a/33856609/3597276– Michael_B
Apr 13 '16 at 14:24