Contact Us
  • Flexbox and the Future of CSS Layout

    Flexbox is a new CSS module that finally addresses layout. From tables to floats, layout on the web has always been a hack. There’s been thousands of grids and frameworks that all attempt to solve what seems like a basic problem, how to properly position text, images and elements on a page.

    CSS Layout That Does What You Want the First Time

    CSS is a declarative language. This basically means it does what it’s told. Do you want the page to be blue or change the font? It’s as easy as a simple change in the stylesheet, but if you want to
    move this box over there, well, there are a whole lot of stipulations. Web designers have adjusted to these peculiarities, but now there is finally a non-hack work around in the CSS Flexbox module.

    While Flexbox is not yet fully supported by all browsers, it shouldn’t be long before this layout solution makes floats seem as outdated as tables. This post will introduce you to some of the power that is Flexbox.

    Creating a Flexbox

    To create a flexbox, create a container around a group of elements:

    flex1

    I’ve given the box elements some styling to give them some width, height and background, but I’ve not yet applied flexbox.

    flex2

    Not much is happening yet. Elements flow down the page and the box divs take up full width:

    Screen Shot 2013-10-16 at 4.14.22 PM

    Now we apply flexbox. For the sake of clarity, I’m leaving off vendor prefixes.

    Screen Shot 2013-10-16 at 4.15.56 PM

    Flexbox, by default, justifies content to the left edge of the container known as flex-start, but you get a handful of placement options including flex-end, center, space-between and space around. See what each propety does below.

    .container {justify-content:flex-start;}/*default behavior*/
    default

    .container {justify-content:center;}
    justify-center

    .container {justify-content:flex-end;}
    justify-end

    .container {justify-content:space-around;}
    space-around

    .container {justify-content:space-between;}
    space-between

    Align Items Vertically

    You can also change the alignment of the elements along the vertical axis, by using the flexbox property, align-items. I’ve added some height to the flexbox container so that the elements have room to align vertically. Here are some examples:

    .container {align-items:flex-start;}/*default behavior*/
    align

    .container {align-items:center;}
    align-center

    .container {align-items:flex-end;}
    align-end

    I’ve just scratched the surface of what Flexbox can do. Flexbox understands relationships between the elements within its flex containers.

    Flexbox Accounts for Height

    A div can be set to grow or shrink proportionally to its siblings within the flex container. This means that responsive layouts are much more accessible. Also, because Flexbox understands and recognizes height, there will be much less need for weird hacks involving lots of padding and negative margins.

    Flex Flow Changes the Main Axis of a Flex Container

    With Flexbox, you can change the main axis of the flex-container to be a column (instead of a row). This is powerful for responsive design when combined with media queries. When a flex-container becomes too tight, you can make the elements stack vertically using .container {flex-flow:column;}.

    There’s a lot more to learn about this new and exciting layout solution. If you’d like to learn more about Flexbox, checkout Sketching with CSS; it’s got a whole chapter dedicated to the subject.

    Also, let us know, have you begun to explore Flexbox? While it’s not fully ready for all browsers, I’d be curious to hear how others are starting to use this new layout module?

    Comments

    1. trudesign says:

      justify-conent <- pretty sure you mean justify-content

    2. A nice, bite-sized intro post to Flexbox, Tim! Thanks! Guys, how many times have we all mistyped CSS and wasted time finding it? :)

    Speak Your Mind

    *