Alright, now that we have finished setting up all the Bootstrap build tools, let's jump into an actual great new feature of Bootstrap 4. The latest version of the framework comes with CSS Flexbox support. The goal of the Flexbox layout module is to create a more effective way of designing a layout for a website or web application. The grid of boxes is aligned in a way that distributes them across their container even if their size is unknown. This is where the "Flex" in Flexbox comes from.

The motivation for a flexible box arose from a web design for mobiles. A way to have a section grow or shrink to best fill the available space was needed when building responsive web applications or websites. Flexbox is the opposite of block layouts that are either vertically or horizontally driven. It's important to note that Flexbox is generally best suited for use when designing web applications. The traditional grid method still works best for larger websites.

In our blog project, we're going to use Flexbox to create a homepage. There will be several rows of blocks, each being a post. I'll show you a few ways to lay the blocks out and different ways you can customize the contents of each block, all using the new Flexbox layout in Bootstrap.

Flexbox basics and terminology

Before we go too far, we should define a few Flexbox basics and some terminology that I'll use throughout the chapter. Every Flexbox layout is dependent on an outer container. As we move through the chapter, I'll refer to this container as the parent. Within the parent container there will always be a collection of boxes or blocks. I'll refer to these boxes as children or child elements of the parent. Why don't we start by talking a little bit more about why you would want to use Flexbox? The main purpose of Flexbox is to allow for the dynamic resizing of child boxes within their parent container.

This works for the resizing of both width and height properties on-the-fly. Many designers and developers prefer this technique as it allows for easier layouts with less code: