I am using this setup in HTML
<body><div class="content"> ... the whole web page goes here</DIV></body>Where content class is
.content { background: lightgrey; max-width: 660px; margin: 0 auto; display:flex; flex-direction: column;}So all the items in the web pages are inside this one flex container. Everything, including tables, other divs and so on.
I am basing this on code I found here https://jsbin.com/fimoluqehi/edit?html,css,output
The only issue is that I see larger vertical space now between items within the children of the flex container.
I made below two complete examples, one with flex and one without. You see when adding flex, there is more vertical space added.
I do not know what is needed to keep the vertical space as it was before, but using flex. I looked at similar question but answers there did not help.
Example not using flex
<!DOCTYPE html><html><head><STYLE> table, th, td { border: 1px solid black; /* Applies a 1px solid black border */ align-self: center; border-collapse: collapse; }.content { background: lightgrey; max-width: 660px; margin: 0 auto;}</STYLE></head><body><div class="content"><h1>This h1 heading</h1><h2>This is h2 title</h2><h3>This is h3 title</h3><h4>This is h4 title</h4><table style="width: 1000px;"><tr><th>Company</th><th>Contact</th><th>Country</th></tr><tr><td>Alfreds Futterkiste Alfreds Futterkiste Alfreds Futterkiste</td><td>Maria Anders Maria Anders Maria Anders</td><td>Germany Germany Germany Germany Germany</td></tr><tr><td>Centro comercial Moctezuma Centro comercial Moctezuma Centro comercial Moctezuma</td><td>Francisco Chang</td><td>Mexico</td></tr></table></DIV></body></html>The above gives
Example using flex
This is the same code as above but changed .content to add flex like this
.content { background: lightgrey; max-width: 660px; margin: 0 auto; display:flex; flex-direction: column;}Now it looks like this
There is more vertical space (larger gap) between elements inside the flex container. This becomes more clear when more items are included. For example the vertical space between headers is now larger.
I am using latest Brave browser on linux.
I tried many options such as
/*align-content: space-between;*/ /*align-items: flex-start;*/ /*does not help */ /*align-items: stretch;*/ /*does not help */ /*align-items: start;*/ /*does not help */ /*flex-grow:0;*/ /*does not help */ /*justify-content: flex-start;*/ /*does not help */But nothing helped.
What do I need to do to keep the vertical space between items inside flex container the same as before? Does one need to modify CSS properties of all children of the flex container to remove the extra gap? I hope not.
Here is fiddle code to try
table, th, td { border: 1px solid black; /* Applies a 1px solid black border */ align-self: center; border-collapse: collapse; }.content { background: lightgrey; max-width: 660px; margin: 0 auto; display:flex; flex-direction: column;}<!DOCTYPE html><html><head></head><body><div class="content"><h1>This h1 heading</h1><h2>This is h2 title</h2><h3>This is h3 title</h3><h4>This is h4 title</h4><table style="width: 1000px;"><tr><th>Company</th><th>Contact</th><th>Country</th></tr><tr><td>Alfreds Futterkiste Alfreds Futterkiste Alfreds Futterkiste</td><td>Maria Anders Maria Anders Maria Anders</td><td>Germany Germany Germany Germany Germany</td></tr><tr><td>Centro comercial Moctezuma Centro comercial Moctezuma Centro comercial Moctezuma</td><td>Francisco Chang</td><td>Mexico</td></tr></table></DIV></body></html>Reference