Creating special grid by using only flex functionalities

Question

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?

Possible duplicate of [CSS align one item right with flexbox](https://stackoverflow.com/questions/35269947/css-align-one-item-right-with-flexbox) — hungerstar, Nov 21 '18 at 22:48

score 2 · Accepted Answer · answered Nov 21 '18 at 22:50

2

You wrote:

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.

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 Benjamin

346,931
104
581
701

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 Benjamin Nov 21 '18 at 23:07

score 1 · Answer 2 · answered Nov 21 '18 at 22:41

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

score 1 · Answer 3 · answered Nov 21 '18 at 22:43

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>

score 0 · Answer 4 · answered Nov 21 '18 at 22:50

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!

score 0 · Answer 5 · answered Nov 21 '18 at 23:18

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>

Creating special grid by using only flex functionalities

5 Answers5