Understanding Flex 3 Column Better

HTML & CSS
,
#1

I have created a Flex Layout. Ultimately it will be converted into a WordPress Project,

https://codepen.io/codeispoetry/pen/RVQbbX

But I am seeking some this kind of structure →

some this kind of structure.png1577×793 4.16 KB

and just with a little order property tweak we should be able to do it like this →

some this kind of structure.png1577×793 4.15 KB

I think this is some grid kind of arrangement.

reason I am discussing this is because see this for example →

This is a kind of 3 column layouts → https://www.screencast.com/t/A5IH2QqU

But if we try to change the two sidebars position left to right and vice versa then this creates a hassle → https://www.screencast.com/t/C1lq9zs4klm3 and makes design adjustments quite troublesome if we had coded in Non flex models.

#2

Just one point to make to begin with:-
Looking at your Pen:-

.wrapper{
  min-height: 100vh;
  background: #ccc;
  display: flex;    /* This... */
  flex-direction: column;
  width: 1400px;     /* ... and this... */
  margin: auto;
   /* ...Do Not Belong Together! */
}
1 Like
#3

That width is set so that the maximum width in which the design remains is 1400 px; Rest everything is flex and competing for space among themselves. If i delete this then this is how it will look like →
width: 1400px; /* … and this… */
https://www.screencast.com/t/UfT5G60nZ65

#4

May be we can change this to maximum width: 1400 px;

1 Like
#5

width: 1400px is unmoving, there will be nothing flexible within a rigid box.

So what you meant to put was max-width: 1400px? That would be much better.

1 Like
#6

Done!

#7

Currently, the margin is set to auto, but after certain width is reached there is no margin left in right and left what’s the fix?
https://www.screencast.com/t/UkQRryZ3xOVE

may be like this →
margin: auto 5%;

#8

Now we have that in initial point out of the way.
The layout you have in you mock ups will or course require nested flexes. Two would be the minimum there I think.
A lot depends on how you want it to behave responsively. What is your intended mobile layout like?

I’m a little unclear on your intention with this. Are you swapping the element order so the right sidebar moves to the left? Flex can do that.
Or are you swapping the layout so the left sidebar stays on the left, but goes full height and the right one vice-versa?
In that case, I’m not so sure… :thinking:

This may be a case for the new CSS grid layout property.

1 Like
#9

Yes, right to the left and vice versa.

#10

I have messaged you two links that have some copyright issues. They are built on table layout I think.

#11

They actually use floats, which is a bit old school. It could be done with either css tables or flex though.
The tables will have better legacy browser support, flex will need less code and queries.

1 Like
#12

I think Flex has quite a good support → http://caniuse.com/#search=flex whats your Opinion?

#13

Yes, support is very good now.
But do watch out for IE11, it can be very “quirky” with flex and has caught me out a few times.
It claims to support it, but is buggy and strange with it, so do test.

1 Like
#14

How should we build this kind of structure?

#15

The first level in the structure, the header, mid section and the footer are a straight stack, simple enough.
The mid section will need further nesting and flex.
The mid section will be a parent with flex and two children: the full height sidebar and a parent container for the other 3 elements.
The parent of the remaining 3 will also be a flex container with its 3 children.
That would be the minimal flex structure. Then define suitable (flexible) widths for the flex children.

1 Like
#16

I tried but could not get what I wanted the maroon section is not going up but sharing the same space in a row. I tried any properties like wrap, direction: column etc This is a good example but they are not using css but scss = https://codepen.io/LandonSchropp/pen/BNQQva

#17

Let me reexplain my design needs.

Sidebar 1 - Main - Sidebar 2

Now the situation arises where these sidebars needs to be reversed say like this →
Sidebar 2- Main - Sidebar 1

This is easily doable just by changing the order.

but there is one more situation -

Sidebar 1 + Main → There should be one box above it as shown in the previous image posted and the second side bar should claim the full height, but this should be done in a very flexible manner that by just changing one property like order we can manipulate or reverse this that means we can implement the same on

main + Sidebar 2 , and in this case sidebar 1 will claim the full height.

#18

That sounds like the scenario I was asking about here.

And my answer still stands.

But what I don’t understand is why you are swapping the sidebars. Under what circumstances will they swap, and why?

1 Like
#19

Thanks for replying sir, I will write an answer with an example soon. Thanks.

#20

As Sam said above, this is exactly what CSS Grid layout is designed for, and it makes this very easy. Flex is not the right tool for this.

Now that grid is supported in the major browsers, I’d suggest using that and letting older browsers just get standard fallbacks.

2 Likes