Hello to all,
Hope you are doing great. I am in the process of learning HTML and CSS, and have already went through a course. However, I still have questions regarding best practices. When it comes to sizing images, what do you recommend? Because I have seen people use absolute units, which I believe is not ideal for responsiveness. Also I have seen a trick which consists of putting the image in a div, setting its display to block. Is this better ?
Regarding flexbox, when a flex item’s display is set to none, why does it still take up space in the workflow ?
Thank you very much. Any help and guidance is both much needed and much appreciated .
While using an absolute unit is not ideal at all for responsiveness, it can sometimes be used for a problem such as position property especially if the image has a fixed position or size that will not change with screen width .
So if you want your images to be the same in size or position or anything else using abolute units may be acceptable here but if you want them to be responsive, using relative units such as % is indeed better.
Regarding your question about the flex item behavior, the general rule before anything else is that if you explicitly set the display property of any element to none it will no longer be displayed and the browser will behave like it never existed before meaning it will use the space that the element used to have. However, if you wish for an element to be invisible yet sit take up space in the workflow of the document, you have to use the visibility property and set it to hidden. You can check out this example in codepen that demonstrates the usage of both properties on a flex item display vs visibility in flexbox (codepen.io)
My experience (and I am still very much a beginner) has been that using %’s is the safest way to deal with varying screen sizes. That being said, using min-width and min-height as well as max-width and max-height in the CSS seems to me to be useful in preventing some bizaare size stretching that can come with %’s.
Hope that helps, and good question.
Nicolas