Flexbox - Photo Gallery

Technologies

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.