CSS: Flexbox

What is Flexbox? Think of it as a method for layouts for elements in your web application. So what makes it different from just assigning a specific class or id to an element and applying CSS to it? While that does work, it has its own limitations and it would result in more work than necessary and ultimately, WET (Write Every Time, or We Enjoy Typing) code.

So what can Flexbox do? Flexbox allows for one to essentially layout or align specific elements or items in a container. For example, look at the image below.

Ultimately, it’s about giving the parent element or container, the ability to alter the elements within to best fit within the container. This is best for when a developer has to build a responsive website that accommodate all sorts of display devices and screen sizes.

Now let’s talk about how it works. There are two parts to consider when using the Flexbox, the parent element or container and the children elements or items. Let’s start building out an example!

<div id=”flex-example”>
 <div>1</div>
 <div>2</div>
 <div>3</div>
 <div>4</div>
</div>

The div in the example above is the container while the divs are the items. If you were to apply CSS at the most basic level for a Flexbox such as just using

#flex-example {
 display: flex;
}

You would get something along the lines of this. Just a row of elements.

Let’s say you wanted to change it by turning the row into a column!

#flex-example {
 display: flex;
 flex-direction: column;
}

You could just do this! Or if you wanted to change the order of the elements, you could reverse it by using flex-direction: column-reverse. The same applies if you wanted to change the order of elements within a row. Just use flex-direction: row-reverse.

So now, let’s start getting into how to make a website more responsive using the flexbox.

#flex-example {
 display: flex;
 flex-wrap: wrap;
}

By using flex-wrap, the elements will begin to adjust themselves and wrap as needed. Look at this link for example.

Tryit Editor v3.6

If you did not want the elements, you could just use flex-wrap: nowrap. Look at this link to see what that would look like.

Tryit Editor v3.6

This is just a few examples of what you can do with the container.

Let’s now talk about what you can do if you wanted to really get nitty gritty with each element.

Remember how I talked about reversing the elements? Let’s say you wanted to make some sort of strange ordering. You could do something along the lines of this.

<div id=”flex-example”>
 <div style=”order: 3">1</div>
 <div style=”order: 1">2</div>
 <div style=”order: 4">3</div>
 <div style=”order: 2">4</div>
</div>

The elements would appear as 2, 4, 1, 3. You could also use flex-grow with would make each element grow relative to the size of the other elements.

<div id=”flex-example”>
 <div style=”flex-grow: 1">1</div>
 <div style=”flex-grow: 4">2</div>
 <div style=”flex-grow: 1">1</div>
</div>

You would essentially get something like this.

Conclusion

In summation, these are just a few examples of what you can do with Flexbox. Flexbox is just one of the many things you can do with CSS to make your life easier for displaying several elements. There is also something called grid used in CSS but I’ll talk about that in a future post. Look at the links below for more information!

CSS Flexbox

Flexbox