5)*/,*/( 0654*%&5)&€¦ · LUC PRINCN 5)*/,*/(0654*%&5)& #09.0%&- ¤ ¤ª¨¥ « ª ¥¤ª¥î ® ¥® Luc Princen | WordCamp Europe | Juni 24th, 2016

LUC PRINCN

THINKINGOUTID THOXMODLan introduction to exox

Luc Princen | WordCamp Europe | Juni 24th, 2016

LUC PRINCNEntrepeneur

WordPress Developer

Creating stuff for theweb at the age of eleven

♥ open source

♥ eloquent javascript

Twitter: @LucP

/ Chef du Web @chefduweb

FLXOXIAWOMR.

three thing

DITRIUTION OF LMNT-ALIGMNT-ORDRING

WHAT W'V N DOINGI KIND OF WIRD

emantic!

<div class="col-lg-4 col-md-6 col-sm-9 omg-wtf-bbq"> ...content </div>

LT M INTRODUC FLXOXjut o ou didn't get guied­up for nothing

rt ome hitor...

display: box; /* 2009 */ display: flexbox; /* 2011 */ display: flex; /* current */

More indepth info at css­tricks.com

demo DITRIUTION OF LMNT

UM UP:Flex: 1Smart scalingGrow, Shrink, Base

demo 2ALIGNMNT

UM UP:Axis basedItems: secondary-axisJustify: main-axisFlex Flow

demo 3ORDRING

UM UP:Order propertyWatch out for margins

PRACTICAL TUFF

paging the prex­fair...

display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex;

oh m...

-webkit-box-orient: horizontal; -moz-box-orient: horizontal; box-orient: horizontal; -webkit-flex-direction: row; -moz-flex-direction: row; flex-direction: row; -ms-flex-direction: row; -webkit-box-align: stretch; -moz-box-align: stretch; box-align: stretch; -webkit-align-items: stretch; -moz-align-items: stretch; -ms-align-items: stretch; -o-align-items: stretch; align-items: stretch; -ms-flex-align: stretch; -webkit-box-pack: justify; -moz-box-pack: justify; box-pack: justify; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; -o-justify-content: space-between; justify-content: space-between; -ms-flex-pack: justify;

OM OLUTION:BourbonCompassAutoprefixer

what have ou got to loe?JUT TRY IT!

OM FURTHR RADING

Flexbox Guide by Css TricksExcellent Flexbox tutorial on YouTubeFlexbox penetration rate on caniuse.comeFlexbugs; community curated list ofworkaroundsFlexbox Froggy: learn flexbox with a gameGreat article on advanced Flexbox gridsFlexbox ♥ Margin:auto

THANK!

quetion?