Category - Playground

Playing With Flex Display

This is a "playground" page used to explore the upcoming display type called flex. Currently this is only supported in IE 11, newer versions of Firefox, and Chrome.

However, in the interest of keeping up with the industry as it changes, it's time to play with some code.

With flex we can:

  • Allow css to determine the available space.
  • This can be done vertically and horizontally.
  • We can also use css to alter the presentation vs source order.

By default the flex-direction is row (horizontal). Which sets the horizontal axes as the main axis and the vertical axis is the cross axis. The justify-content property moves items along the main axis, while align-items goes along the cross axis.

Here are some examples of flex with the css used for each.

The first example shows that we can truly center items both horizontally and veritically.

#flexcenter {
     border: 1px solid gray;
     padding: 1em;
     display: -webkit-flex;
     display: -ms-flex;
     display: flex;
     height: 200px;
     justify-content: center;
     align-items: center;
}
#flexcenter > div {
     width: 50px;
     height: 50px;
     border: 1px solid slateblue;
     
}
box1
box2
box3
box4
box5

The next example shows what happens when you change the justify-content (main axis) to space between.

#flexspace {
     border: 1px solid gray;
     padding: 1em;
     display: -webkit-flex;
     display: -ms-flex;
     display: flex;
     height: 200px;
     justify-content: space-between;
     align-items:center;
}
#flexspace > div {
     width: 50px;
     height: 50px;
     border: 1px solid slateblue;
     
}
box1
box2
box3
box4
box5

You can also completely change the order of the items regardless of their source order. This uses the order property. Below I moved box 2 to the first position and box 3 to the end.

#flexreorder {
     border: 1px solid gray;
     padding: 1em;
     display: -webkit-flex;
     display: -ms-flex;
     display: flex;
     height: 200px;
     justify-content: space-between;
     align-items:center;
}
#flexreorder > div {
     width: 50px;
     height: 50px;
     border: 1px solid slateblue;
     
}
#flexreorder > div:nth-child(2) {
    order: -1;
}
#flexreorder > div:nth-child(3) {
    order: 5;
}

box1
box2
box3
box4
box5

The next example shows how we can use flex to replicate a layout. Flex is applied to a div that surrounds the sidebar and content. The sidebar has a defined width and a height. The content also has a greater height and it has a property of flex set to 1, which allows it to absorb any unused space.

#flexlayout header, #flexlayout > div, #flexlayout footer {
    width: 90%;
    margin: 0 auto;
    border: 1px solid black;
}
#flexlayout header {
    font-size: 2em;
    line-height: 2em;
    text-align: center;
}
#flexlayout > div {
    /*main wrapper*/
    display: -webkit-flex;
    display: -ms-flex;
    display: flexbox;
    flex-direction: row;    
    margin: 1em auto;
}
#flexlayout aside {
    /*sidebar*/
    width: 25%;
    background-color: #ccc;
    height: 100px;
    text-align: center;
}
#flexlayout section {
    /*content*/
    background-color: #DDD;
    height: 200px;
    flex: 1;
    text-align: center;
}
#flexlayout footer {
    text-align:center;
}

header
content
footer

The benefit is a cleaner sidebar that could even be moved to the other side using the order property if we wanted a right sidebar. But, we don't have any of that nasty "clearfix" problem that we have when floating elements. If we wanted the content to wrap around the sidebar, then we wouldn't need a clearfix, and wouldn't be able to use flex. Flex is about assigning space to items based on both axis in relation to items around them.

Overall, a pretty cool display type. It's gone through several versions including a version called "flexbox". However, we are starting to see browser implementation by latest versions of chrome, firefox and IE11 that don't require prefixes, so I'd say we are pretty close to being able to implement this across websites aimed for a wide range of browsers. The only major players that don't recognize flex or a vendor prefixed flex is IE8 and IE9

Browser Compatability: CanIUse.Com Flex

You must be logged in to comment.