Chapter 3. Jumping into Flexbox

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.