Flex Spacing

<div class="flex3column">
 <aside class="bigaside">
	Big
</aside>
<article class="maincontent">
	Main
</article>
<aside class="smallaside">
	Small
</aside>
</div><!-- flex3column -->

CSS →

.flex3column {display: flex; justify-content: space-between; max-width: 90%;}
.bigaside{flex:1 0 0; border: 1px solid #EEE;}
.smallaside{flex:1 0 0; border: 1px solid #EEE;}
.maincontent{flex: 6 0 0; border: 1px solid #EEE;}

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.

Just give a margin to the middle item and remove the justify-content and max-width.

e.g.

.flex3column {display: flex;  }
.bigaside{flex:1 0 0; border: 1px solid #EEE;}
.smallaside{flex:1 0 0; border: 1px solid #EEE;}
.maincontent{flex: 6 0 0; border: 1px solid #EEE;margin:0 1rem}
1 Like

Thank you so much. This was very insightful and crisp.

1 Like

@PaulOB, In case we delete the aside’s(two asides)

and then slightly modify the CSS in the middle:

.maincontent{flex: 10 0 0; margin:0 1rem; max-width: 980px;}

Is it possible that we can force the →

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

If you are removing the side columns then you could put the margins on each side column and not the middle column.

E.g. right margin on left column and then left margin on right column. Then when you remove the sidebars you don’t need to touch the css

1 Like

Ok. Like this →

.bigaside{flex:2 0 0; margin-right: 1rem;}
.smallaside{flex:2 0 0; margin-left: 1rem;}
.maincontent{flex: 10 0 0; max-width: 980px; margin: auto;}

Yes.

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.

1 Like

Sir, when we are making such arrangements:

flex:2 0 0; + flex:2 0 0; + flex: 10 0 0

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 :slight_smile:

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.

1 Like

Hi, there @PaulOB,

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:

.maincontent{display: flex; flex: 5 0 0; margin: auto;}

Is there any hack or better way to write a code to get done what we are missing?

Hi,

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.

.mainarticle {flex: 6 0 0;max-width: 980px;margin: auto;}

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. :slight_smile:

1 Like

Yes, that is right and thanks for replying.

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 →

image

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 :slight_smile:

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 :slight_smile:

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.

2 Likes

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:

That nesting of the 2nd part was making things complicated so I was experimenting with something, but not yet successful.

Just below the end of those 3 columns, I put a new flexbox:

Ti match the width of the nested flex(content + Rightsidebar):

/* Comment system */
.commentsystem {
	display: flex;
	max-width: calc(83.33% - 3em);
	flex-direction: column;
	justify-content: flex-end
}

but the flex-end doesnt seems to wok though.

If this would have worked. i would have removed nesting, and made Left sidebar fixed wherever needed.

Margin-left based on %age calculation may work.

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.:slight_smile:

2 Likes