layout with flexbox
DESCRIPTION
Finally a standard layout tool built for the internet.TRANSCRIPT
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