How to make space between elements inside div container
I have a flex-container which will be dynamically filled by elements. Container doesn’t have fixed width (I use max-width: max-content; ) and can contain as many element as I want. The problem is that I need spacing between these elements, but don’t need spacing on the left and right side between an element and the container. Of course I can do it with .element and .element:last-child , but is there a way to achieve it without pseudo-classes and JS?
You could get the last element with javascript, then add a class to this element, but it’s more tedious than just using the :last-child selector
Seems to be a solution it’s just not cross browsers yet (Not working on Chrone) — column-gap: 20px; — developer.mozilla.org/en-US/docs/Web/CSS/column-gap#Flex_layout
4 Answers 4
You can use flex with the column-gap property.
Also, setting justify-content: space-between will ensure an even space between elements if the width of the parent container increases.
my element my element my element my element my element my element my element Container doesn’t have fixed width (I use max-width: max-content;) and can contain as many element as I want.
You can use inline-flex container because inline elements will fit to the its contents and will stay in one row.
I need spacing between these elements, but don’t need spacing on the left and right side between an element and the container.
You can set say a margin: 10px on the flex items and then set margin-left: 0 to the first flex item and margin-right: 0 to the last flex item — see demo below:
body < margin: 0; >.container < display: inline-flex; background: cadetblue; >.element < margin: 10px; background: pink; padding: 5px; >.element:first-child < margin-left: 0; >.element:last-child
my element my element my element my element my element my element my element my element my element my element How to add space between elements so they fill their container div?
I want to add space between spans so that the leftmost and rightmost spans will be close to the edges of the inner div. I’ve tried to add the following rule, but it had no effect.
span.icon-square < margin: 0 auto; >span.icon-square:first-child < margin-left: 0; >span.icon-square:last-child
The illustration of what I’m trying to achieve is given below: 
So, what am I missing?
2 Answers 2
You can do this with Flexbox and justify-content: space-between .
For Infos and older browser, text-align:justify + a pseudo element to generate an extra line can still be usefull. For really old browser (IE5) , turn the pseudo into a tag (span), technic is quiet old but still efficient where flex is not avalaible or unwanted.
edit : there is nothing here about text-justify if you ever read too fast 😉
div < background:#C3DEB7; padding:1px; >p < background:#A0C5E8; margin:1em auto; width:80%; text-align:justify; >p:after < content:''; width:100%; >span, p:after < display:inline-block; >span < border-radius: 15px; background:#7A9FC1; line-height:60px; width:60px; margin-top:1em; text-align:center; color:white; box-shadow:inset 0 0 0 1px ; >span:nth-child(1) < background:#709AC2; >span:nth-child(3) < background:#6D93B7; >span:last-child