CSS Flexible Box Layout, commonly known as Flexbox, is a CSS 3 web layout model. It is in the W3C’s candidate recommendation stage. The flex layout allows responsive elements within a container to be automatically arranged depending upon screen size.

Category Image Box with Image Zoom Using Flex

While building an ecommerce website I needed a front page that really showcased the products and grabbed the potential customer’s attention. Using a beautiful image with elegant category text and a smooth animation really did the trick. I’ve put the markup and css up on CodePen. I wrote the css in SASS.

CodePen Example

In the process I found a great image placeholder site. Rather than placeholder.com style gray boxes, it provides nice pretty sample images. I recommend it for prototyping and placeholder image content in development. Check it out here: Lorem Picsum

Happy coding!

• John