Adventure into Flexbox

Learning Flexbox

---

How I learned flexbox was to just dive straight in and see what happened if I changed this value and how I could combine them. I started by reading and referencing an article on CSS Tricks that is all about flexbox. I would recommend you do the same.

After you get past the uglyness of have so many vender prefixes for everything it is not to hard to understand. Something I did to help with this was to create scss mixins for each so I didn’t have to look at all those vender prefixes. I have provide my mixins at the end of this article.

Flexbox Awesomeness

---

If you don’t like math, flexbox is for you. Browser support is almost there that it can be used in production. To see what browser support flexbox you can find out on caniuse.com. No more dealing with collapse parents and clearfix hacks when using flexbox.

Navigations

---

By far the best place I have found to use flexbox is in navigations. Hopefully we all are making websites with a mobile first approach and flexbox helps make this easier.

For the next bit I will be referencing the following html block.

<header>
    <nav>
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li>
            <li><a href="#">Link 5</a></li>
            <li><a href="#">Link 6</a></li>
        </ul>
    </nav>
</header>

Small Viewport

---

To start with you need to specify what the flexbox parent is. To do so apply display: flex; to the <ul>. Then apply flex-flow: row wrap; and justify-content: flex-start; to the <ul> too.

Now we are going to tell the flexbox children what to do. Lets apply flex: 0 1 50%; to the <li>. This will make all the <li> 50% wide. Also I added some basic styling on the <a>.

header nav ul {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    -moz-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-justify-content: flex-start;
    -moz-justify-content: flex-start;
    justify-content: flex-start;
}

header nav ul li {
    -webkit-box-flex: 0 1 50%;
    -moz-box-flex: 0 1 50%;
    -webkit-flex: 0 1 50%;
    -ms-flex: 0 1 50%;
    flex: 0 1 50%;
}


header nav ul li a {
    display: block;
    padding: 1em 0;
    text-decoration: none;
    color: #000;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 1.15em;
    text-align: center;
}

Medium Viewport

---

Now thats great but as the viewport size increase I think we need to go to a 4 links wide layout. To do this, just change the <li> to flex: 0 1 25%;.

And thats all, your done.

@media screen and (min-width: 540px) {

    header nav ul li {
        -webkit-box-flex: 0 1 25%;
        -moz-box-flex: 0 1 25%;
        -webkit-flex: 0 1 25%;
        -ms-flex: 0 1 25%;
        flex: 0 1 25%;
    }
}

Medium Viewport Alternative

If you wanted the last two links to fill the remaining space, basically making them both 50% wide (since we have 6 links and are showing 4 per row), no worrys that is incredible easy. On the <li> use flex: 1 1 25%; and your done. Try doing that using floats with the same amount of effort.

Large Viewport

---

Now this is where the magic happens with flexbox. We are at the large viewport and want all the links in one line. Remember how I said if you don’t like math you will like flexbox, this is why. To make all the links appear on the same line simply change the <li> to flex: 1 1 auto; and just like magic all the links will be on the same line.

@media screen and (min-width: 800px) {

    header nav ul li {
        -webkit-box-flex: 1 1 auto;
        -moz-box-flex: 1 1 auto;
        -webkit-flex: 1 1 auto;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
    }
}

Easy, little to no math involded. What makes this great is if you added another link you won’t have to go back and calculate the new percent for the width of the <li>. The css and browser does it automatically.

View the Full Example

---

See the Pen Adventure into Flexbox by Geoffrey Rose (@geoffreyrose) on CodePen

More Detailed Examples

---

I have several; different navigation layout examples that uses flexbox on this Unreal Navigation. These examples have a little js included for hiding the navigation on small viewports and include a logo.

• Flexbox Examples

Each of the examples have a link to a pen on CodePen so you can experiment with flexbox even more.

Flexbox Mixins(SCSS)

---

@mixin flexbox() {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

@mixin flex($flex-value) {
  -webkit-box-flex: $flex-value;
  -moz-box-flex:  $flex-value;
  -webkit-flex:  $flex-value;
  -ms-flex:  $flex-value;
  flex:  $flex-value;
}

@mixin order($order-value) {
  -webkit-box-ordinal-group: $order-value;  
  -moz-box-ordinal-group: $order-value;     
  -ms-flex-order: $order-value;     
  -webkit-order: $order-value;  
  order: $order-value;
}

@mixin flexflow($flow-value) {
    -webkit-flex-flow: $flow-value;
    -moz-flex-flow: $flow-value;
    -ms-flex-flow: $flow-value;
    flex-flow: $flow-value;
}

@mixin justify($justify-value) {
    -webkit-justify-content: $justify-value;
    -moz-justify-content: $justify-value;
    justify-content: $justify-value;
}

@mixin align-self($alignself-value) {
    -webkit-align-self: $alignself-value;
    -moz-align-self: $alignself-value;
    -ms-align-self: $alignself-value;
    align-self: $alignself-value;
}

Resources

---

A Complete Guide to Flexbox - CSS Tricks

Flexbox Support

More Flexbox Examples