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...

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:

Ordering your Flexbox

Flexbox is a really powerful module as it comes with several properties that you can customize. Let's quickly go over some more basics before we fully take the plunge and use Flexbox in Bootstrap. Let's start by talking about the order of child boxes. By default, they will appear in the order that you insert them in the HTML file. Consider the following code:

<div class="parent"> 
   <div class="child"> 
   1 
   </div> 
   <div class="child"> 
   2 
   </div> 
   <div class="child"> 
   3 
   </div> 
</div> 

A proper CSS will produce a layout that looks like this:

Here's the CSS to produce this layout if you are following along at home:

.parent { 
  display: flex; 
  background: #ccc; 
  padding: 10px; 
  font-family: helvetica; 
} 
 
.child { 
  padding: 10px; 
  margin: 10px; 
  background: #fff; 
  flex-grow...

Wrapping your Flexbox

By default all of your child boxes will try to fit onto one line. If you have a layout with several boxes, this may not be the look you want. If this is the case, you can use the flex-wrap property to wrap the child boxes as needed. Let's add more boxes to our original code with the following HTML:

<div class="parent"> 
   <div class="child"> 
   1 
   </div> 
   <div class="child"> 
   2 
   </div> 
   <div class="child"> 
   3 
   </div> 
   <div class="child"> 
   4 
   </div> 
   <div class="child"> 
   5 
   </div> 
   <div class="child"> 
   6 
   </div> 
   <div class="child"> 
   7 
   </div> 
   <div class="child"> 
   8 
   </div> 
   <div class="child"> 
   9 
   </div> 
</div> 
 

We now have...

Setting up the Bootstrap Flexbox layout grid

Whether your are using Flexbox or not, the grid is based on Bootstrap's regular row and column classes. If you are familiar with the Bootstrap grid, this will work exactly as you expect it to. Before you start any Bootstrap project, you need to decide if you want to use a Flexbox or regular grid. Unfortunately, you can't use both at the same time in a Bootstrap project. Since the focus of this chapter is on Flexbox, we'll be using the appropriate grid configuration. By default Bootstrap is set up to use the regular grid. Therefore, we are going to need to edit the source files to activate the Flexbox grid. Let's start by downloading the source files again from http://v4-alpha.getbootstrap.com/ .

Once you've downloaded the ZIP file, expand it and rename it so you don't get confused. Call it something like Flexbox Bootstrap. Next we'll need to edit a file and recompile the source files to apply the changes.

Updating the Sass variable

To use the Flexbox...

Setting up a Flexbox project

A Flexbox project is structured exactly like a regular one. You just have to be sure to replace the bootstrap.min.css file in the /css directory with the new Flexbox version. Copy the project we made in the last chapter and paste it wherever you want on your computer. Rename the project to something like Flexbox project. Now open up that project and navigate to the /css directory. In a new window, open up the Flexbox sources files directory and navigate to the /dist/css/ directory. Copy the bootstrap.min.css file from /dist/css into the /css directory in your new Flexbox project. You'll be prompted to overwrite the file and you should choose Yes. That's it, your new Flexbox project is ready to roll.

It would be a good idea to keep the Flexbox source files somewhere on your computer. In future projects, you can simply copy the compiled Flexbox version of the Bootstrap CSS over, saving you the trouble of having to recompile the source files each time you want a...

Designing a single blog post

Let's start by designing the layout and content for a single blog post. At the very least, a blog post should have: a title, post-meta, description, and a read more link. Open up the flexbox.ejs file and replace the first column's code with this new code:

<div class="col-md-4 child"> 
  <h3><a href="#">Blog Post Title</a></h3> 
  <p><small>Posted by <a href="#">Admin</a> on January 1, 2016</small></p> 
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget ornare lacus. Nulla sed vulputate mauris. Nunc nec urna vel sapien mattis consectetur sit amet eu tellus.</p> 
  <p><a href="#">Read More</a></p> 
</div> 

Let me breakdown what is happening here:

• I've added an <h3> tag with a link for the post title

• I've added some post-meta and wrapped it in a <small> tag so it is subtle

• I've left our description...

Summary

We started by reviewing the basic functionality of the Flexbox module and the terminology that goes along with it. Next, I showed you how to activate the Flexbox grid in Bootstrap by editing the Sass variable and recompiling the source files. Finally we got our hands dirty by learning how to build a blog homepage and feed using the Bootstrap Flexbox grid. In the next chapter, we'll move further into layouts and how you can set up your pages with Bootstrap.