Layout with flexbox

Flexbox LayoutsA proper layout tool for the web… Finally!

HTML layouts before

display

HTML layouts before

displayblock | inline | inline-block | table | inline-table

HTML layouts before

position

HTML layouts before

positionrelative | absolute | fixed | static

HTML layouts before

float

HTML layouts before

floatleft | right | none

HTML layouts before

floatleft | right | none

clear

HTML layouts before

floatleft | right | none

clear

left | right | both | none

HTML layouts with Flexbox

HTML layouts with Flexboxflex container

HTML layouts with Flexboxflex container

display: flex | inline-flex

HTML layouts with Flexboxflex container

flex items

Flex Containerflex-direction

vertical horizontal

Flex Containerflex-wrap

wrap no-wrap

Flex Containerjustify-content: flex-start

Flex Containerjustify-content: flex-end

Flex Containerjustify-content: center

Flex Containerjustify-content: space-between

Flex Containerjustify-content: space-around

Flex Containeralign-items: flex-start

Flex Containeralign-items: flex-end

Flex Containeralign-items: center

Flex Containeralign-items: stretch

Flex Containeralign-items: baseline

hola hi hey howdy

Flex Container

align-content: flex-start

Flex Container

align-content: flex-end

Flex Container

align-content: center

Flex Container

align-content: stretch

Flex Container

align-content: space-between

Flex Container

align-content: space-around

Flex Items

order: 1

Flex Items

order: 2

Flex Items

order: 3

Flex Items

flex-grow: 1

Flex Items

flex-grow: 1

Flex Items

flex-grow: 1

Flex Items

flex-grow: 1

Flex Items

flex-grow: 2

Flex Items

flex-grow: 1

Flex Itemsflex-shrink: 1

Flex Itemsflex-shrink: 2

Flex Itemsflex-shrink: 1

Flex Itemsflex-basis: 20em

Flex Itemsflex: 2 1 50em

Flex Itemsflex: 2 1 50em

flex-grow

Flex Itemsflex: 2 1 50em

flex-shrink

Flex Itemsflex: 2 1 50em

flex-basis

Flex Items

align-self: flex-start

align-self: flex-end

Internet Explorer 9 and below…

Internet Explorer 9 and below…

Canada: 7.5%

rapidly shrinking

So what do we do now?

So what do we do now?pureCSS grid module

uses inline-block for <= IE9<div class="pure-g"> <div class="pure-u-1-3"><p>Thirds</p></div> <div class="pure-u-1-3"><p>Thirds</p></div> <div class="pure-u-1-3"><p>Thirds</p></div> </div>

Works very well if you know how many

columns

So what do we do now?pureCSS grid module

uses inline-block for <= IE9

re-order with javascriptjQuery insertAfter()

<div class=“order-3”><div class=“order-1”><div class=“order-2”>

<div class="pure-g"> <div class="pure-u-1-3"><p>Thirds</p></div> <div class="pure-u-1-3"><p>Thirds</p></div> <div class="pure-u-1-3"><p>Thirds</p></div> </div>

<div class=“order-3”>

$(window).resize(function() { if ($(window).width() < 960) { $(“.order-3”).insertAfter( $(“.order-2”) );

So what do we do now?

a { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex }

a { display: flex; }

Autoprefixer post-processor

Holy Grail Layoutheader, footer, three columns

• Has a fluid center with fixed-width sidebars • Center column should appear first in the HTML • Columns should be the same height • Minimal markup • The footer should "stick" to the bottom of the page when content is sparse

http://codepen.io/adamskye/pen/OPJKEP