I was trying to give some spacing between the columns by restricting the maximum available space for the .flex3column to 90% still despite in justify-content I am using space-between. It didn’t worked.
<article class="maincontent">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</article>
I think margin auto is the magic, but w/o implementing that keeping the current margin:0 1rem; as that will also accommodate the possibility when two asides are present can we accomplish:
when no asides are there maincontent should be in the middle of the available space.
Remember though that flex items may grow larger if their content pushes them wide (like a large image). If you wanted the sidebars to remain even on both side you may be better off giving them a width.
Aren’t we giving them the width in terms of %age or ratio(out of total = 2+2+10 = 14)?
(Instead of 2,2, and 10, which is summing to 14, We could have also used 1, 1, and 5 - I realized it later. That doesn’t change the scope of question though)
No flex-grow doesn’t really have much to do with widths or percentages.
When you say flex:1 you are telling the element to take as much free space as it can. When you give it flex:2 it will take twice as much free space as the other elements assuming that there is enough room. If your other elements are taking up all the room then it cannot give you twice as much because there will be no free space.
That’s why its called flex
If you want a fixed width in percentage then use width or if you want a basis for the element then use flex-basis. Note that flex-basis is not the same as a width and may vary depending on content and circumstance.
Yes, you are right. I recaptured few concepts from here as I am coming back to flexbox after a long time → https://flexbox.io/
Flex = (flex-grow, flex-shrink, flex-basis)
Flex-grow is simply to understand.
flex-shrink means instruction on one, few or all elements to shrink when available space is not in abundance.
Flex-basis is a width analog of flexbox CSS, but not completely. I have created an HTML recently its part is here →
If we delete(all situations may not deleting- some may have one, two or none sidebar):
the right-hand side and left-hand side aside than we are left with:
<article class="mainarticle">
But that doesn’t come in the middle.
In that case if we delete this part: flex: 5 0 0
from this part:
You don’t define the criteria for your layout in specific enough terms in order to give an answer that will satisfy all the variations that may occur.
If you want to remove left and/or right columns then why have you nested the right column inside the maincontent meaning that you have a nested flexbox for the right column?
You don’t need to nest the right column as that just complicates the page.
You have a max-width of 980px on that element so you will need margin:auto to centre it when the sidebars are no longer in place.
If this does not answer your question then you will need to define what you want to happen fully and in every instance of when columns are present or missing? Once you define what needs to happen it becomes much easier to make it happen.
Actually, this is the HTML that I am trying to build.
I am making it full proof for the future.
#1 → If there be a necessity there should be the availability of 3 columns, which can be deleted based on inputs from Wordpress meta in the backend controlled through checkboxes.
#2 → when the sidebars are not needed I want the content to be centered. In case when screen widths are very large I do not want the content to occupy the whole width sir.
My current screen resolution is →
In such a wider screen, paragraph occupying full space when no sidebars are there will look very ugly.
Regarding the nesting part:
when I will convert it into a wordpress blog I will also be including the comment system. There are two options:
Just above the footer where these 3 columns are ending, I can give full width to the comment system or the same logic of full-width ugliness what if I want that the left sidebar when used should be sticky, and in that case, the comment system should be below main content + right-hand sidebar
I don’t think so if we need the comment box the way I told you above there is an option where we do not have to nest the two flex items still we can put a comment system below two items of flexbox. Please educate me or share the experience you have, in case if that is possible.
In a remote past you once created a sensation flexbox here:
The connecting post where all the discussion had taken place:
You already have that facility with the margin:auto added as mentioned in my previous post. What is it that does not meet your requirements in that scenario?
Is of no interest to me or anyone else
Base your requirements on the design not some real or imaginary device width. if you don;t want a paragraph to be too wide then set a max-width at the width you would think is suitable (which you seem to have done at 980px).
Is this an extra requirement? Are we now talking about 4 columns? You already have three columns so what is this extra commenting system? Or are you referring to the existing third visual column?
Ambiguity is our enemy here
In that scenario you may be better of with css grid rather than flexbox as css grid will work in rows and columns.
Here’s some examples of css grid that I just knocked up that seems to allow for some of the things you are asking.
(View on codepen to see wide screen layout)
Bear in mind this is untested and my CSS grid skills are still pretty basic so this may be the wrong way to go about it.
The problem with trying to cover every eventuality is that you still will need to offer differing styles depending on what you want to achieve although it can use the same html.
Yes, I understand, but the reason behind posting that was to ascertain whoever is reading knows what specifications I was working to avoid any additional ambiguity. 1 year back on some post there was some confusion and when I posted a screencast. Things changed.
Ok.
No No. This is not an extra requirement. 4 columns are not needed. But in case if I am fixing the lefthand sidebar, and putting comment system below Main content + Right handsidebar than this may have this kind of layout:
We already have that setup (apart from the fixed sidebar) in the flex demo example that I did for you a while ago. For the fixed column you should use position:sticky so that the space is preserved.
I’ve added another example using position:sticky to the end of this old demo.
Its more complex than it needs to be as it is part of that demo where you wanted to swap almost everything around but shows that the layout you want is achievable.
Note that the grid example I posted in my previous post does much the same thing but with much simpler html. It also has the sticky side column in place.
You have all the pieces you need for this jigsaw with working examples of what you need so now it is up to you to practice and extrapolate just the bits that you want.
