Flexbox - Photo Gallery

🔗 Click here to access

Technologies

• HTML
• CSS

What I have learned

• Reset box model by adding a * or html rule selector to the CSS file with the box-sizing property set to border-box. This is needed because, by default, the browser includes the border and padding when determining an element's size;

• Put div elements of class gallery inline when using display property set to flex;

• Adjust flex with properties like flex-direction and flex-wrap (other examples include flex-basis, flex-flow, flex-grow and flex-shrink);

• Flex-basis acts similar as width property;

• The object-fit property set to cover means the image will be clipped to fit the given dimension;

• The content property is used with the ::before and ::after pseudo-elements to insert generated content;

• Setting the content property to an empty string "" will ensure the element is rendered to the page while still being empty.

Contact

[email protected]