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.
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
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
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…
This may be a case for the new CSS grid layout property.
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.
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.
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.
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
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.