Hello Flexbox.

The future of layout in CSS

olex@thinkful.com

@tholex

The Status Quo

Putting things side-by-side in CSS requires using one of three hacks.

float 
+ clear

display: inline-block + html spaces
2.
1.
3.
position: absolute
+ padding?...

Example: Nav Links

<nav class="nav">
  <ul class="nav-list">
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    <li><a href="">Right Link</a></li>
  </ul>
</nav>
.nav {
  margin-top: 40px;
  margin-bottom: 40px;
  a {
    display: inline-block;
    text-decoration: none;
    color: #ff612f;
    padding: 8px 14px;
    background-color: #eee;
  }
}
style css

Using Floats (ugh!!!)

.nav.float li {
  float: left;
}
.nav.float li:last-child {
  float: right;
}

.clearfix {
  clear: both;
}

<nav class="nav float">
  <ul class="nav-list">
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    <li><a href="">Right Link</a></li>
  </ul>

  <div class="clearfix"></div>
</nav>

You need an extra HTML element, correctly placed to "clear" the float.

Using i-block and absolute (sigh)

<nav class="nav iblock-abs">
  <ul class="nav-list">
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    <li><a href="">Right Link</a></li>
  </ul>
</nav>

You need to remove the text spacing between inline-block elements (font-size: 0; on parent)

.nav.iblock-abs ul {
  position: relative;
  font-size: 0;
}
.nav.iblock-abs li {
  display: inline-block;
  font-size: 1rem;
}
.nav.iblock-abs li:last-child {
  position: absolute;
  right: 0;
}

Forget it, Flex it!

<nav class="nav flex">
  <ul class="nav-list">
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    <li><a href="">Right Link</a></li>
  </ul>
</nav>
.nav.flex ul {
  display: flex;
}

.nav.flex li:last-child {
  margin-left: auto;
}
 display: flex; on the container

The Future

  • Flexbox will be the de-facto way
    of arranging containers
     
  • Floats only used for the thing
    newspaper people call "floats"
     
  • Inline-block only used for small
    side-by-side cases, e.g. buttons
     
  • Absolute positioning only used
    for one-off elements and
    visual design / pseudo-el's

Flexbox is great for filling a container regardless of contents.

  • Children with flex-grow property expand their internal size to fill container - you can mix static width, flex-grow, and %!
     
  • Elements with margin-{dir}: auto can create space between elements to fill container if there are no flex-grow siblings.
     
  • Container with justify-content determines how remaining space is filled otherwise. (similar to text-align but way more awesome!)

Axes / flex-direction

Everything about flexbox can be flipped 90º or 180º

row (default)
row-reverse

1

2

3

2

1

3

column

1

2

3

3

2

1

column-reverse

Spacing / justify-content 

flex-start
flex-end
center
space-between
space-around

"Vertical" Spacing
align-items 

flex-start
flex-end
stretch (default)
center
+ baseline (lowest snippet of text inside is aligned)

Wrapping and Row Spacing

flex-wrap & align-content 

nowrap (default)
wrap
+ wrap-reverse
stretch (default)

flex-start, flex-end,
center, space-between,  and space-around

Child Properties

Elements with flex-grow automatically gobble up their parents' space in proportion to their flex-grow value.

1
1
1
1
2.7
1
1
2.7

flex-shrink: 0, flex-basis can prevent shrinking

1
2.7

order can override HTML position

align-self can override align-items for one element

Flex is Complex, but keeps Simple Things Easy

"Centering in the Unkown", a classic CSS problem

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

Demo

Flexbox Apple Keyboard

Flexbox is a HUGE step for CSS

Finally, there is now a functional multitool for CSS Layout

If you need the details, flipping directions in media queries, reordering, anything, it's there!

We are 69.3% in the Future!

IE < 11, iOS < 7, and Android < 4.4 don't support the spec.

As Microsoft kills XP, flex might reach 90-95% by mid-2015

Thanks!

Nav links, "status quo" demo:

    http://codepen.io/tholex/pen/GordK

Chris Coyer's "A Complete Guide to Flexbox" (inspired this):

    http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Can I Use Page / Browser Support:

    http://caniuse.com/#search=flexbox

 

Note: CanIUse numbers (e.g. "82%") also mention an "Old" Flexbox spec which almost reached candidate status in 2009-2011. However, old flexbox works differently and is dead! Newer browsers don't support it.

Made with Slides.com