Creating special grid by using only flex functionalities
I have to create a layout which looks like:
I've prepared code like:
.red {
width: 50px;
height: 50px;
background-color: red;
margin-right: 20px;
}
.yellow {
width: 50px;
height: 50px;
background-color: yellow;
}
.blue {
width: 50px;
height: 50px;
background-color: blue;
justify-self: end;
}
.wrapper {
display: flex;
background-color: green;
width: 100%;
}<div class="wrapper">
<div class="red"> </div>
<div class="yellow"> </div>
<div class="blue"> </div>
</div>But this blue div don't want to align to the right side:
Here you can a have a preview of that:
https://jsfiddle.net/ncszob80/17/
I know that I can fix it with margin-left: auto css style for blue div.
But I'm wondering if there is some possibility of creating such layout only by using flex functionality.
So:
we can use only flex functionalities
there needs to be some margin between red div and yellow one
blue div needs to be at the very right
How to achieve that?
html css css3 flexbox
edited Nov 21 '18 at 22:53
Michael_B
151k48243356
asked Nov 21 '18 at 22:30
Patryk JanikPatryk Janik
14318
add a comment |
I have to create a layout which looks like:
I've prepared code like:
.red {
width: 50px;
height: 50px;
background-color: red;
margin-right: 20px;
}
.yellow {
width: 50px;
height: 50px;
background-color: yellow;
}
.blue {
width: 50px;
height: 50px;
background-color: blue;
justify-self: end;
}
.wrapper {
display: flex;
background-color: green;
width: 100%;
}<div class="wrapper">
<div class="red"> </div>
<div class="yellow"> </div>
<div class="blue"> </div>
</div>But this blue div don't want to align to the right side:
Here you can a have a preview of that:
https://jsfiddle.net/ncszob80/17/
I know that I can fix it with margin-left: auto css style for blue div.
But I'm wondering if there is some possibility of creating such layout only by using flex functionality.
So:
we can use only flex functionalities
there needs to be some margin between red div and yellow one
blue div needs to be at the very right
How to achieve that?
html css css3 flexbox
edited Nov 21 '18 at 22:53
Michael_B
151k48243356
asked Nov 21 '18 at 22:30
Patryk JanikPatryk Janik
14318
1
Possible duplicate of CSS align one item right with flexbox
– hungerstar
Nov 21 '18 at 22:48
add a comment |
I have to create a layout which looks like:
I've prepared code like:
.red {
width: 50px;
height: 50px;
background-color: red;
margin-right: 20px;
}
.yellow {
width: 50px;
height: 50px;
background-color: yellow;
}
.blue {
width: 50px;
height: 50px;
background-color: blue;
justify-self: end;
}
.wrapper {
display: flex;
background-color: green;
width: 100%;
}<div class="wrapper">
<div class="red"> </div>
<div class="yellow"> </div>
<div class="blue"> </div>
</div>But this blue div don't want to align to the right side:
Here you can a have a preview of that:
https://jsfiddle.net/ncszob80/17/
I know that I can fix it with margin-left: auto css style for blue div.
But I'm wondering if there is some possibility of creating such layout only by using flex functionality.
So:
we can use only flex functionalities
there needs to be some margin between red div and yellow one
blue div needs to be at the very right
How to achieve that?
html css css3 flexbox
edited Nov 21 '18 at 22:53
Michael_B
151k48243356
asked Nov 21 '18 at 22:30
Patryk JanikPatryk Janik
14318
I have to create a layout which looks like:
I've prepared code like:
.red {
width: 50px;
height: 50px;
background-color: red;
margin-right: 20px;
}
.yellow {
width: 50px;
height: 50px;
background-color: yellow;
}
.blue {
width: 50px;
height: 50px;
background-color: blue;
justify-self: end;
}
.wrapper {
display: flex;
background-color: green;
width: 100%;
}<div class="wrapper">
<div class="red"> </div>
<div class="yellow"> </div>
<div class="blue"> </div>
</div>But this blue div don't want to align to the right side:
Here you can a have a preview of that:
https://jsfiddle.net/ncszob80/17/
I know that I can fix it with margin-left: auto css style for blue div.
But I'm wondering if there is some possibility of creating such layout only by using flex functionality.
So:
we can use only flex functionalities
there needs to be some margin between red div and yellow one
blue div needs to be at the very right
How to achieve that?
.red {
width: 50px;
height: 50px;
background-color: red;
margin-right: 20px;
}
.yellow {
width: 50px;
height: 50px;
background-color: yellow;
}
.blue {
width: 50px;
height: 50px;
background-color: blue;
justify-self: end;
}
.wrapper {
display: flex;
background-color: green;
width: 100%;
}<div class="wrapper">
<div class="red"> </div>
<div class="yellow"> </div>
<div class="blue"> </div>
</div>.red {
width: 50px;
height: 50px;
background-color: red;
margin-right: 20px;
}
.yellow {
width: 50px;
height: 50px;
background-color: yellow;
}
.blue {
width: 50px;
height: 50px;
background-color: blue;
justify-self: end;
}
.wrapper {
display: flex;
background-color: green;
width: 100%;
}<div class="wrapper">
<div class="red"> </div>
<div class="yellow"> </div>
<div class="blue"> </div>
</div>html css css3 flexbox
html css css3 flexbox
edited Nov 21 '18 at 22:53
Michael_B
151k48243356
asked Nov 21 '18 at 22:30
Patryk JanikPatryk Janik
14318
edited Nov 21 '18 at 22:53
Michael_B
151k48243356
asked Nov 21 '18 at 22:30
Patryk JanikPatryk Janik
14318
edited Nov 21 '18 at 22:53
Michael_B
151k48243356
edited Nov 21 '18 at 22:53
Michael_B
151k48243356
edited Nov 21 '18 at 22:53
Michael_B
151k48243356
151k48243356
asked Nov 21 '18 at 22:30
Patryk JanikPatryk Janik
14318
asked Nov 21 '18 at 22:30
Patryk JanikPatryk Janik
14318
asked Nov 21 '18 at 22:30
Patryk JanikPatryk Janik
14318
14318
1
Possible duplicate of CSS align one item right with flexbox
– hungerstar
Nov 21 '18 at 22:48
add a comment |
1
Possible duplicate of CSS align one item right with flexbox
– hungerstar
Nov 21 '18 at 22:48
1
1
Possible duplicate of CSS align one item right with flexbox
– hungerstar
Nov 21 '18 at 22:48
Possible duplicate of CSS align one item right with flexbox
– hungerstar
Nov 21 '18 at 22:48
add a comment |
5 Answers
5
active
oldest
votes
You wrote:
I know that I can fix it with
margin-left: autocss style for blue div. But I'm wondering if there is some possibility of creating such layout only by using flex functionality.
Actually, margin-left: auto is flex functionality. It's a feature of flex layout.
From the flexbox specification:
- § 8.1. Aligning with
auto
margins
Also see:
- In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
In summary, just use the auto margin. It's the cleanest, simplest and most efficient solution.
answered Nov 21 '18 at 22:50
Michael_BMichael_B
151k48243356
1
I had no idea it is a good solution to use the margin for such situations thanks for the clarification. Now I can use it without heart attack :D
– Patryk Janik
Nov 21 '18 at 23:00
It's a feature buried deep in the specification, but it's there... and it's very useful. See the second link for a more in-depth explanation and many examples.
– Michael_B
Nov 21 '18 at 23:07
add a comment |
My best solution for you would be to change your DOM structure a little bit - but it accomplishes what you're looking for:
.left {
display: flex;
}
.red {
width: 50px;
height: 50px;
background-color: red;
margin-right: 20px;
}
.yellow {
width: 50px;
height: 50px;
background-color: yellow;
}
.blue {
width: 50px;
height: 50px;
background-color: blue;
}
.wrapper {
display: flex;
background-color: green;
width: 100%;
justify-content: space-between;
}<div class="wrapper">
<div class="left">
<div class="red"> </div>
<div class="yellow"> </div>
</div>
<div class="right">
<div class="blue"> </div>
</div>
</div>Basically, I wrapped your boxes in .left and .right, and then changed the .wrapper to justify-content: space-between so that the .right box is shoved to the right. Then, we make .left { display: flex; } to fix the issue with those boxes stacking without doing this, or changing the elements inside to display: inline; or display: inline-block;.
answered Nov 21 '18 at 22:41
RyanRyan
3169
add a comment |
You can use nested flex boxes. Make the flex wrapper for your blue item and justify that to the end:
.wrapper {
display: flex;
background-color: green;
width: 100%;
}
.red {
width: 50px;
height: 50px;
background-color: red;
margin-right: 20px;
}
.yellow {
width: 50px;
height: 50px;
background-color: yellow;
}
.blueWrap {
width: 100%;
height: 50px;
display: flex;
justify-content: flex-end;
}
.blue {
width: 50px;
height: 50px;
background-color: blue;
}<div class="wrapper">
<div class="red"> </div>
<div class="yellow"> </div>
<div class="blueWrap">
<div class="blue"></div>
</div>
</div>answered Nov 21 '18 at 22:43
MichaelvEMichaelvE
1,2881311
add a comment |
Aside from changing your DOM structure or using the margin-left: auto fix CSS Grid is fantastic for this type of layout. I know you said only Flexbox but if you don't want any of the other solutions Grid might be a nice alternative. You can mix Flex functionality within the grid as well for finer control. I do this regularly to achieve the layout I'm in need of and it works well!
Happy coding!
answered Nov 21 '18 at 22:50
Jonathan SextonJonathan Sexton
5916
add a comment |
Here is another idea if you don't want to consider margin:auto and without changing your html but like said in the accepted answer, margin is a feature of flexbox:
.red {
width: 50px;
height: 50px;
background-color: red;
margin-right: 20px;
}
.yellow {
width: 50px;
height: 50px;
background-color: yellow;
}
.blue {
width: 50px;
height: 50px;
background-color: blue;
order:1; /*make the blue the last element*/
}
.wrapper {
display: flex;
background-color: green;
width: 100%;
}
.wrapper:after {
content:"";
flex-grow:1; /*make this hidden element to take all the space and push the blue*/
}<div class="wrapper">
<div class="red"> </div>
<div class="yellow"> </div>
<div class="blue"> </div>
</div>answered Nov 21 '18 at 23:18
Temani AfifTemani Afif
72.7k94081
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%2f53421350%2fcreating-special-grid-by-using-only-flex-functionalities%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
5 Answers
5
active
oldest
votes
5 Answers
5
active
oldest
votes
active
oldest
votes
active
oldest
votes
You wrote:
I know that I can fix it with
margin-left: autocss style for blue div. But I'm wondering if there is some possibility of creating such layout only by using flex functionality.
Actually, margin-left: auto is flex functionality. It's a feature of flex layout.
From the flexbox specification:
- § 8.1. Aligning with
auto
margins
Also see:
- In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
In summary, just use the auto margin. It's the cleanest, simplest and most efficient solution.
answered Nov 21 '18 at 22:50
Michael_BMichael_B
151k48243356
1
I had no idea it is a good solution to use the margin for such situations thanks for the clarification. Now I can use it without heart attack :D
– Patryk Janik
Nov 21 '18 at 23:00
It's a feature buried deep in the specification, but it's there... and it's very useful. See the second link for a more in-depth explanation and many examples.
– Michael_B
Nov 21 '18 at 23:07
add a comment |
You wrote:
I know that I can fix it with
margin-left: autocss style for blue div. But I'm wondering if there is some possibility of creating such layout only by using flex functionality.
Actually, margin-left: auto is flex functionality. It's a feature of flex layout.
From the flexbox specification:
- § 8.1. Aligning with
auto
margins
Also see:
- In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
In summary, just use the auto margin. It's the cleanest, simplest and most efficient solution.
answered Nov 21 '18 at 22:50
Michael_BMichael_B
151k48243356
1
I had no idea it is a good solution to use the margin for such situations thanks for the clarification. Now I can use it without heart attack :D
– Patryk Janik
Nov 21 '18 at 23:00
It's a feature buried deep in the specification, but it's there... and it's very useful. See the second link for a more in-depth explanation and many examples.
– Michael_B
Nov 21 '18 at 23:07
add a comment |
You wrote:
I know that I can fix it with
margin-left: autocss style for blue div. But I'm wondering if there is some possibility of creating such layout only by using flex functionality.
Actually, margin-left: auto is flex functionality. It's a feature of flex layout.
From the flexbox specification:
- § 8.1. Aligning with
auto
margins
Also see:
- In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
In summary, just use the auto margin. It's the cleanest, simplest and most efficient solution.
answered Nov 21 '18 at 22:50
Michael_BMichael_B
151k48243356
You wrote:
I know that I can fix it with
margin-left: autocss style for blue div. But I'm wondering if there is some possibility of creating such layout only by using flex functionality.
Actually, margin-left: auto is flex functionality. It's a feature of flex layout.
From the flexbox specification:
- § 8.1. Aligning with
auto
margins
Also see:
- In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
In summary, just use the auto margin. It's the cleanest, simplest and most efficient solution.
answered Nov 21 '18 at 22:50
Michael_BMichael_B
151k48243356
answered Nov 21 '18 at 22:50
Michael_BMichael_B
151k48243356
answered Nov 21 '18 at 22:50
Michael_BMichael_B
151k48243356
answered Nov 21 '18 at 22:50
Michael_BMichael_B
151k48243356
151k48243356
1
I had no idea it is a good solution to use the margin for such situations thanks for the clarification. Now I can use it without heart attack :D
– Patryk Janik
Nov 21 '18 at 23:00
It's a feature buried deep in the specification, but it's there... and it's very useful. See the second link for a more in-depth explanation and many examples.
– Michael_B
Nov 21 '18 at 23:07
add a comment |
1
I had no idea it is a good solution to use the margin for such situations thanks for the clarification. Now I can use it without heart attack :D
– Patryk Janik
Nov 21 '18 at 23:00
It's a feature buried deep in the specification, but it's there... and it's very useful. See the second link for a more in-depth explanation and many examples.
– Michael_B
Nov 21 '18 at 23:07
1
1
I had no idea it is a good solution to use the margin for such situations thanks for the clarification. Now I can use it without heart attack :D
– Patryk Janik
Nov 21 '18 at 23:00
I had no idea it is a good solution to use the margin for such situations thanks for the clarification. Now I can use it without heart attack :D
– Patryk Janik
Nov 21 '18 at 23:00
It's a feature buried deep in the specification, but it's there... and it's very useful. See the second link for a more in-depth explanation and many examples.
– Michael_B
Nov 21 '18 at 23:07
It's a feature buried deep in the specification, but it's there... and it's very useful. See the second link for a more in-depth explanation and many examples.
– Michael_B
Nov 21 '18 at 23:07
add a comment |
My best solution for you would be to change your DOM structure a little bit - but it accomplishes what you're looking for:
.left {
display: flex;
}
.red {
width: 50px;
height: 50px;
background-color: red;
margin-right: 20px;
}
.yellow {
width: 50px;
height: 50px;
background-color: yellow;
}
.blue {
width: 50px;
height: 50px;
background-color: blue;
}
.wrapper {
display: flex;
background-color: green;
width: 100%;
justify-content: space-between;
}<div class="wrapper">
<div class="left">
<div class="red"> </div>
<div class="yellow"> </div>
</div>
<div class="right">
<div class="blue"> </div>
</div>
</div>Basically, I wrapped your boxes in .left and .right, and then changed the .wrapper to justify-content: space-between so that the .right box is shoved to the right. Then, we make .left { display: flex; } to fix the issue with those boxes stacking without doing this, or changing the elements inside to display: inline; or display: inline-block;.
answered Nov 21 '18 at 22:41
RyanRyan
3169
add a comment |
My best solution for you would be to change your DOM structure a little bit - but it accomplishes what you're looking for:
.left {
display: flex;
}
.red {
width: 50px;
height: 50px;
background-color: red;
margin-right: 20px;
}
.yellow {
width: 50px;
height: 50px;
background-color: yellow;
}
.blue {
width: 50px;
height: 50px;
background-color: blue;
}
.wrapper {
display: flex;
background-color: green;
width: 100%;
justify-content: space-between;
}<div class="wrapper">
<div class="left">
<div class="red"> </div>
<div class="yellow"> </div>
</div>
<div class="right">
<div class="blue"> </div>
</div>
</div>Basically, I wrapped your boxes in .left and .right, and then changed the .wrapper to justify-content: space-between so that the .right box is shoved to the right. Then, we make .left { display: flex; } to fix the issue with those boxes stacking without doing this, or changing the elements inside to display: inline; or display: inline-block;.
answered Nov 21 '18 at 22:41
RyanRyan
3169
add a comment |
My best solution for you would be to change your DOM structure a little bit - but it accomplishes what you're looking for:
.left {
display: flex;
}
.red {
width: 50px;
height: 50px;
background-color: red;
margin-right: 20px;
}
.yellow {
width: 50px;
height: 50px;
background-color: yellow;
}
.blue {
width: 50px;
height: 50px;
background-color: blue;
}
.wrapper {
display: flex;
background-color: green;
width: 100%;
justify-content: space-between;
}<div class="wrapper">
<div class="left">
<div class="red"> </div>
<div class="yellow"> </div>
</div>
<div class="right">
<div class="blue"> </div>
</div>
</div>Basically, I wrapped your boxes in .left and .right, and then changed the .wrapper to justify-content: space-between so that the .right box is shoved to the right. Then, we make .left { display: flex; } to fix the issue with those boxes stacking without doing this, or changing the elements inside to display: inline; or display: inline-block;.
answered Nov 21 '18 at 22:41
RyanRyan
3169
My best solution for you would be to change your DOM structure a little bit - but it accomplishes what you're looking for:
.left {
display: flex;
}
.red {
width: 50px;
height: 50px;
background-color: red;
margin-right: 20px;
}
.yellow {
width: 50px;
height: 50px;
background-color: yellow;
}
.blue {
width: 50px;
height: 50px;
background-color: blue;
}
.wrapper {
display: flex;
background-color: green;
width: 100%;
justify-content: space-between;
}<div class="wrapper">
<div class="left">
<div class="red"> </div>
<div class="yellow"> </div>
</div>
<div class="right">
<div class="blue"> </div>
</div>
</div>Basically, I wrapped your boxes in .left and .right, and then changed the .wrapper to justify-content: space-between so that the .right box is shoved to the right. Then, we make .left { display: flex; } to fix the issue with those boxes stacking without doing this, or changing the elements inside to display: inline; or display: inline-block;.
.left {
display: flex;
}
.red {
width: 50px;
height: 50px;
background-color: red;
margin-right: 20px;
}
.yellow {
width: 50px;
height: 50px;
background-color: yellow;
}
.blue {
width: 50px;
height: 50px;
background-color: blue;
}
.wrapper {
display: flex;
background-color: green;
width: 100%;
justify-content: space-between;
}<div class="wrapper">
<div class="left">
<div class="red"> </div>
<div class="yellow"> </div>
</div>
<div class="right">
<div class="blue"> </div>
</div>
</div>.left {
display: flex;
}
.red {
width: 50px;
height: 50px;
background-color: red;
margin-right: 20px;
}
.yellow {
width: 50px;
height: 50px;
background-color: yellow;
}
.blue {
width: 50px;
height: 50px;
background-color: blue;
}
.wrapper {
display: flex;
background-color: green;
width: 100%;
justify-content: space-between;
}<div class="wrapper">
<div class="left">
<div class="red"> </div>
<div class="yellow"> </div>
</div>
<div class="right">
<div class="blue"> </div>
</div>
</div>answered Nov 21 '18 at 22:41
RyanRyan
3169
answered Nov 21 '18 at 22:41
RyanRyan
3169
answered Nov 21 '18 at 22:41
RyanRyan
3169
answered Nov 21 '18 at 22:41
RyanRyan
3169
3169
add a comment |
add a comment |
You can use nested flex boxes. Make the flex wrapper for your blue item and justify that to the end:
.wrapper {
display: flex;
background-color: green;
width: 100%;
}
.red {
width: 50px;
height: 50px;
background-color: red;
margin-right: 20px;
}
.yellow {
width: 50px;
height: 50px;
background-color: yellow;
}
.blueWrap {
width: 100%;
height: 50px;
display: flex;
justify-content: flex-end;
}
.blue {
width: 50px;
height: 50px;
background-color: blue;
}<div class="wrapper">
<div class="red"> </div>
<div class="yellow"> </div>
<div class="blueWrap">
<div class="blue"></div>
</div>
</div>answered Nov 21 '18 at 22:43
MichaelvEMichaelvE
1,2881311
add a comment |
You can use nested flex boxes. Make the flex wrapper for your blue item and justify that to the end:
.wrapper {
display: flex;
background-color: green;
width: 100%;
}
.red {
width: 50px;
height: 50px;
background-color: red;
margin-right: 20px;
}
.yellow {
width: 50px;
height: 50px;
background-color: yellow;
}
.blueWrap {
width: 100%;
height: 50px;
display: flex;
justify-content: flex-end;
}
.blue {
width: 50px;
height: 50px;
background-color: blue;
}<div class="wrapper">
<div class="red"> </div>
<div class="yellow"> </div>
<div class="blueWrap">
<div class="blue"></div>
</div>
</div>answered Nov 21 '18 at 22:43
MichaelvEMichaelvE
1,2881311
add a comment |
You can use nested flex boxes. Make the flex wrapper for your blue item and justify that to the end:
.wrapper {
display: flex;
background-color: green;
width: 100%;
}
.red {
width: 50px;
height: 50px;
background-color: red;
margin-right: 20px;
}
.yellow {
width: 50px;
height: 50px;
background-color: yellow;
}
.blueWrap {
width: 100%;
height: 50px;
display: flex;
justify-content: flex-end;
}
.blue {
width: 50px;
height: 50px;
background-color: blue;
}<div class="wrapper">
<div class="red"> </div>
<div class="yellow"> </div>
<div class="blueWrap">
<div class="blue"></div>
</div>
</div>answered Nov 21 '18 at 22:43
MichaelvEMichaelvE
1,2881311
You can use nested flex boxes. Make the flex wrapper for your blue item and justify that to the end:
.wrapper {
display: flex;
background-color: green;
width: 100%;
}
.red {
width: 50px;
height: 50px;
background-color: red;
margin-right: 20px;
}
.yellow {
width: 50px;
height: 50px;
background-color: yellow;
}
.blueWrap {
width: 100%;
height: 50px;
display: flex;
justify-content: flex-end;
}
.blue {
width: 50px;
height: 50px;
background-color: blue;
}<div class="wrapper">
<div class="red"> </div>
<div class="yellow"> </div>
<div class="blueWrap">
<div class="blue"></div>
</div>
</div>.wrapper {
display: flex;
background-color: green;
width: 100%;
}
.red {
width: 50px;
height: 50px;
background-color: red;
margin-right: 20px;
}
.yellow {
width: 50px;
height: 50px;
background-color: yellow;
}
.blueWrap {
width: 100%;
height: 50px;
display: flex;
justify-content: flex-end;
}
.blue {
width: 50px;
height: 50px;
background-color: blue;
}<div class="wrapper">
<div class="red"> </div>
<div class="yellow"> </div>
<div class="blueWrap">
<div class="blue"></div>
</div>
</div>.wrapper {
display: flex;
background-color: green;
width: 100%;
}
.red {
width: 50px;
height: 50px;
background-color: red;
margin-right: 20px;
}
.yellow {
width: 50px;
height: 50px;
background-color: yellow;
}
.blueWrap {
width: 100%;
height: 50px;
display: flex;
justify-content: flex-end;
}
.blue {
width: 50px;
height: 50px;
background-color: blue;
}<div class="wrapper">
<div class="red"> </div>
<div class="yellow"> </div>
<div class="blueWrap">
<div class="blue"></div>
</div>
</div>answered Nov 21 '18 at 22:43
MichaelvEMichaelvE
1,2881311
answered Nov 21 '18 at 22:43
MichaelvEMichaelvE
1,2881311
answered Nov 21 '18 at 22:43
MichaelvEMichaelvE
1,2881311
answered Nov 21 '18 at 22:43
MichaelvEMichaelvE
1,2881311
1,2881311
add a comment |
add a comment |
Aside from changing your DOM structure or using the margin-left: auto fix CSS Grid is fantastic for this type of layout. I know you said only Flexbox but if you don't want any of the other solutions Grid might be a nice alternative. You can mix Flex functionality within the grid as well for finer control. I do this regularly to achieve the layout I'm in need of and it works well!
Happy coding!
answered Nov 21 '18 at 22:50
Jonathan SextonJonathan Sexton
5916
add a comment |
Aside from changing your DOM structure or using the margin-left: auto fix CSS Grid is fantastic for this type of layout. I know you said only Flexbox but if you don't want any of the other solutions Grid might be a nice alternative. You can mix Flex functionality within the grid as well for finer control. I do this regularly to achieve the layout I'm in need of and it works well!
Happy coding!
answered Nov 21 '18 at 22:50
Jonathan SextonJonathan Sexton
5916
add a comment |
Aside from changing your DOM structure or using the margin-left: auto fix CSS Grid is fantastic for this type of layout. I know you said only Flexbox but if you don't want any of the other solutions Grid might be a nice alternative. You can mix Flex functionality within the grid as well for finer control. I do this regularly to achieve the layout I'm in need of and it works well!
Happy coding!
answered Nov 21 '18 at 22:50
Jonathan SextonJonathan Sexton
5916
Aside from changing your DOM structure or using the margin-left: auto fix CSS Grid is fantastic for this type of layout. I know you said only Flexbox but if you don't want any of the other solutions Grid might be a nice alternative. You can mix Flex functionality within the grid as well for finer control. I do this regularly to achieve the layout I'm in need of and it works well!
Happy coding!
answered Nov 21 '18 at 22:50
Jonathan SextonJonathan Sexton
5916
answered Nov 21 '18 at 22:50
Jonathan SextonJonathan Sexton
5916
answered Nov 21 '18 at 22:50
Jonathan SextonJonathan Sexton
5916
answered Nov 21 '18 at 22:50
Jonathan SextonJonathan Sexton
5916
5916
add a comment |
add a comment |
Here is another idea if you don't want to consider margin:auto and without changing your html but like said in the accepted answer, margin is a feature of flexbox:
.red {
width: 50px;
height: 50px;
background-color: red;
margin-right: 20px;
}
.yellow {
width: 50px;
height: 50px;
background-color: yellow;
}
.blue {
width: 50px;
height: 50px;
background-color: blue;
order:1; /*make the blue the last element*/
}
.wrapper {
display: flex;
background-color: green;
width: 100%;
}
.wrapper:after {
content:"";
flex-grow:1; /*make this hidden element to take all the space and push the blue*/
}<div class="wrapper">
<div class="red"> </div>
<div class="yellow"> </div>
<div class="blue"> </div>
</div>answered Nov 21 '18 at 23:18
Temani AfifTemani Afif
72.7k94081
add a comment |
Here is another idea if you don't want to consider margin:auto and without changing your html but like said in the accepted answer, margin is a feature of flexbox:
.red {
width: 50px;
height: 50px;
background-color: red;
margin-right: 20px;
}
.yellow {
width: 50px;
height: 50px;
background-color: yellow;
}
.blue {
width: 50px;
height: 50px;
background-color: blue;
order:1; /*make the blue the last element*/
}
.wrapper {
display: flex;
background-color: green;
width: 100%;
}
.wrapper:after {
content:"";
flex-grow:1; /*make this hidden element to take all the space and push the blue*/
}<div class="wrapper">
<div class="red"> </div>
<div class="yellow"> </div>
<div class="blue"> </div>
</div>answered Nov 21 '18 at 23:18
Temani AfifTemani Afif
72.7k94081
add a comment |
Here is another idea if you don't want to consider margin:auto and without changing your html but like said in the accepted answer, margin is a feature of flexbox:
.red {
width: 50px;
height: 50px;
background-color: red;
margin-right: 20px;
}
.yellow {
width: 50px;
height: 50px;
background-color: yellow;
}
.blue {
width: 50px;
height: 50px;
background-color: blue;
order:1; /*make the blue the last element*/
}
.wrapper {
display: flex;
background-color: green;
width: 100%;
}
.wrapper:after {
content:"";
flex-grow:1; /*make this hidden element to take all the space and push the blue*/
}<div class="wrapper">
<div class="red"> </div>
<div class="yellow"> </div>
<div class="blue"> </div>
</div>answered Nov 21 '18 at 23:18
Temani AfifTemani Afif
72.7k94081
Here is another idea if you don't want to consider margin:auto and without changing your html but like said in the accepted answer, margin is a feature of flexbox:
.red {
width: 50px;
height: 50px;
background-color: red;
margin-right: 20px;
}
.yellow {
width: 50px;
height: 50px;
background-color: yellow;
}
.blue {
width: 50px;
height: 50px;
background-color: blue;
order:1; /*make the blue the last element*/
}
.wrapper {
display: flex;
background-color: green;
width: 100%;
}
.wrapper:after {
content:"";
flex-grow:1; /*make this hidden element to take all the space and push the blue*/
}<div class="wrapper">
<div class="red"> </div>
<div class="yellow"> </div>
<div class="blue"> </div>
</div>.red {
width: 50px;
height: 50px;
background-color: red;
margin-right: 20px;
}
.yellow {
width: 50px;
height: 50px;
background-color: yellow;
}
.blue {
width: 50px;
height: 50px;
background-color: blue;
order:1; /*make the blue the last element*/
}
.wrapper {
display: flex;
background-color: green;
width: 100%;
}
.wrapper:after {
content:"";
flex-grow:1; /*make this hidden element to take all the space and push the blue*/
}<div class="wrapper">
<div class="red"> </div>
<div class="yellow"> </div>
<div class="blue"> </div>
</div>.red {
width: 50px;
height: 50px;
background-color: red;
margin-right: 20px;
}
.yellow {
width: 50px;
height: 50px;
background-color: yellow;
}
.blue {
width: 50px;
height: 50px;
background-color: blue;
order:1; /*make the blue the last element*/
}
.wrapper {
display: flex;
background-color: green;
width: 100%;
}
.wrapper:after {
content:"";
flex-grow:1; /*make this hidden element to take all the space and push the blue*/
}<div class="wrapper">
<div class="red"> </div>
<div class="yellow"> </div>
<div class="blue"> </div>
</div>answered Nov 21 '18 at 23:18
Temani AfifTemani Afif
72.7k94081
answered Nov 21 '18 at 23:18
Temani AfifTemani Afif
72.7k94081
answered Nov 21 '18 at 23:18
Temani AfifTemani Afif
72.7k94081
answered Nov 21 '18 at 23:18
Temani AfifTemani Afif
72.7k94081
72.7k94081
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%2f53421350%2fcreating-special-grid-by-using-only-flex-functionalities%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
1
Possible duplicate of CSS align one item right with flexbox
– hungerstar
Nov 21 '18 at 22:48