Login with:


Or:


Not a member? Sign Up

Forgot Password?

Signup with:


Or:


Already have an account? Log in

Flexbox Tutorial


Written by Bartłomiej Malanowski ,

What is Flexbox?

Flexible Box Layout Model (called just Flexbox), is a new layout mode. Using flexbox makes you sure that elements behave predictably when the page layout must accommodate different screen sizes and different display devices. Flexbox is easy to use and every developer will find it useful.

Flexbox was introduced with CSS 3. Since Bootstrap 4 use flexbox by default, MDB switched to flexbox too.

Browser compatibility

Chrome Firefox Internet Explorer Opera Safari Android iOS
29+ 28+ 11+ 17+ 6.1+ Android 4.4+ 7.1+

Flexbox Basics

Before we get started I need to explain you a couple of things:

  • - Flex container is the parent element that contains flex items. Containers use flex or inline-flex values of the display property.
  • - Flex item are a children elements of flex container

In pure CSS you would need to add display: flex; or display: inline-flex; property to your HTML element, but thanks to Bootstrap 4 you can simply set the display, by adding .d-flex or .d-inline-flex class. Keep in mind that display: flex is a default value for display property in Bootstrap, so in most cases, you don't have to use .d-flex class.

Here's the basic flexbox layout:

Flex Item
Flex Item
Flex Item
<div class="container">
    <div class="row mb-2">
        <div class="col primary-color text-center flex-example">Flex Item</div>
        <div class="col red darken-2 text-center flex-example">Flex Item</div>
        <div class="col amber lighten-1 text-center flex-example">Flex Item</div>
    </div>
</div>

In this case, .row have a flex value for display property so we don't have to use .d-flex class.

Flex Column/Row

Flexible layouts allow you to position child elements vertically (column) or horizontally (row). But there are also two more options: column reverse and row reverse. By default, our flex-items will be displayed in a row, but what if we want to display them in a column? We should add .flex-column class to .row.

Flex Item
Flex Item
Flex Item
<div class="container">
    <div class="row flex-column">
        <div class="col-12 primary-color text-center flex-example">Flex Item</div>
        <div class="col-12 red darken-2 text-center flex-example">Flex Item</div>
        <div class="col-12 amber lighten-1 text-center flex-example">Flex Item</div>
    </div>
</div>

.flex-column class tells your browser "Hey, I want a column", by setting a flex-direction property to "column". As I said, there are four options of flex-direction. You can choose between .flex-column, .flex-column-reverse, .flex-row-reverse and of course .flex-row which is a default. For example try to use .flex-column-reverse instead of .flex-column. Can you see it? The yellow flex item moved to the top and blue one fell to the bottom. Isn't it awesome?

Alignment

In flexbox, you can align all of your flex items at once or separately. In Bootstrap 4 we have two rich collections of classes that will help you with this. They're fully compatible with grid breakpoints that make it even more useful.

You can use align-items to change the alignment of your flex items. The default option for align-items is stretch. You can use align-items to change the alignment of your flex items. The default option for align-items is "stretch". Go to flexbox section in our docs to discover all of the options!

For example, we'll use .align-items-center, but to make it more tricky we'll add also .align-items-lg-start. Add those classes to your flex container and see the result:

Flex Item
Flex Item
Flex Item
<div class="d-flex align-items-start align-items-lg-center grey lighten-3" style="height:100px;">
    <div class="primary-color text-center flex-example">Flex Item</div>
    <div class="red darken-2 text-center flex-example">Flex Item</div>
    <div class="amber lighten-1 text-center flex-example">Flex Item</div>
</div>

As you can see, flex items are centered vertically, but when you resize your browser to smaller resolution they'll be aligned to top

I also told you that the flex items can be aligned separately. It's also easy. They're aligned separately, so you have to use align-self property on your flex items, not flex container. To see how it works I added .align-self-start to the blue box, .align-self-center to the red box and .align-self-end to the yellow one.

Flex Item
Flex Item
Flex Item
<div class="d-flex align-items-start align-items-lg-center grey lighten-3" style="height:100px;">
    <div class="primary-color text-center flex-example">Flex Item</div>
    <div class="red darken-2 text-center flex-example">Flex Item</div>
    <div class="amber lighten-1 text-center flex-example">Flex Item</div>
</div>

Using flexbox you can also align your flex items horizontally. How? By using justify-content. For example, if you add .justify-content-between class to your flex container you'll see some space between your flex items

Flex Item
Flex Item
Flex Item
<div class="d-flex justify-content-between grey lighten-3" style="height:100px;">
    <div class="primary-color text-center flex-example">Flex Item</div>
    <div class="red darken-2 text-center flex-example">Flex Item</div>
    <div class="amber lighten-1 text-center flex-example">Flex Item</div>
</div>

Ordering

It's almost end of our tutorial, but I would like to show you one more thing. I bet you ever wanted to change an order of your HTML elements. Thanks to flexbox you can do it using order property:

First Item
Second Item
Third Item
<div class="d-flex grey lighten-3">
    <div class="primary-color text-center flex-example flex-last">First Item</div>
    <div class="red darken-2 text-center flex-example">Second Item</div>
    <div class="amber lighten-1 text-center flex-example flex-first">Third Item</div>
</div>

That was so easy, right? I hope that the flexbox isn't a black magic to you anymore. Thank you for taking time to read our flexbox tutorial. If you have any questions, please leave a comment!


Do you want to share?


About author


User avatar

Bartłomiej Malanowski

Fullstack Developer, team leader, the biggest enthusiast of MDBootstrap. Big fan of Material Design and passionate of JavaScript

Leave a reply

Card image cap

Create advanced websites and apps


With MDB Pro you can create easily and fast the most advanced projects.

2000+ stunning premium components, 50+ sections, 20+ templates, 30 plugins, direct contact with our team to help you with any questions and unlimited future updates.