css flexbox module - helenng.co.ukhelenng.co.uk/content/seminar/css_flexbox.pdf · what is flexbox?...
TRANSCRIPT
CSS FLEXBOX MODULE
Helen Ng 11 February 2016
WHAT IS FLEXBOX?
� A set of CSS properties
� Aligns and lays out items using two axes – main axis and cross axis
� Works out how to fill the space within the flex container most appropriately
FLEX CONTAINER
1 2 3
flex-direction:
row|row-reverse|column|column-reverse
main axis: from left to right
cross axis: top to bottom
PARENT STYLE
flex-direction:
row|row-reverse|column|column-reversePARENT STYLE
FLEX CONTAINER
1
2
3
cross axis: from left to right
main axis: top to bottom
WHAT CAN FLEXBOX DO?
� Perfectly centre child elements
� Create flexible small-scale layouts
� Easily re-arrange items in layouts
Without flexbox…
.parent{height:6em;position:relative;border:2pxsolid#39d0d4;
}
.child{margin:0;position:absolute;top:50%;left:50%;margin-right:-50%;transform:translate(-50%,-50%);
}
With flexbox…
.parent{display:flex;justify-content:center;align-items:center;border:2pxsolid#39d0d4;
}
EXAMPLE No. 1:
Perfectly centre child elements
.parent{
display:flex;
}
PARENT STYLE
FLEX CONTAINER
FLEX ITEM
FLEX ITEM
FLEX ITEM
justify-content:alignsonthemainaxisflex-start|flex-end|center|space-between|space-around
PARENT STYLE
flex-start space-between
space-around flex-end
center
align-items:alignsonthecross-axisflex-start|flex-end|center|stretch|baseline
flex-start stretch
baseline flex-end
center
PARENT STYLE
EXAMPLE No. 2:
Create flexible small-scale layouts
.flex-container{
display:flex;
flex-flow:rowwrap;
}
.flex-item{
padding:10px;
margin:5px;
border-radius:10px;
height:200px;
flex:11350px;
}
flex-wrap:nowrap|wrap|wrap-reverse PARENT
STYLE
Allows flex-items to go onto multiple lines when container shrinks
Original
Example 1
.flex-container{
flex-wrap:wrap;
}
flex-grow:<integer>;CHILD STYLE
.box{
flex-grow:1;
}
Scaling up the flex-item when there is extra space within the container
.box{flex-grow:1;}.box3{flex-grow:4;}
Example 1
Example 2
Original
.box{flex-shrink:1;}
.box{flex-shrink:1;}.box3{flex-shrink:10;}
Example 2
Example 1
Original
CHILD STYLE
flex-shrink:<integer>;
Scaling down the flex-item when there is not enough space within the container
.box{
flex-basis:100px;
}
.box{
flex-basis:100px;
}
.box1{
flex-basis:auto;
height:200px;
}
Example 1: flex-direction is column
Example 2: flex-direction is row
100px
200px
flex-basis:
Initial size of an item before the remaining space is distributed CHILD STYLE
EXAMPLE No. 3:
Easily re-arrange items in layout
Screen-size: > 800px
Screen-size: < 800px
.wrapper{display:flex;flex-flow:rowwrap;}header,footer,.aside1,.aside2{flex:1100%;}header{order:1;}article{height:200px;flex:1500px;order:4;}footer{order:5;}.aside1{order:2;}.aside2{order:3;}/*~~whenscreenwidthis800pxorgreaterthan~~*/@mediaalland(min-width:800px){article{flex:5auto;order:2;}footer{order:4;}.aside1,.aside2{flex:1100px;.aside1{order:1;}.aside2{order:3;}}
.box3{order:1;}
.box4{order:-1;}.box5{order:-2;}
Original
Example 1
Example 2
order:<integer>;
Anything greater than default value of 0, will put item at the end CHILD STYLE
display:flex
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
order
flex-grow
flex-shrink
flex-basis
flex
align-self
FULL LIST OF PROPERTIES
PARENT CHILD
A Complete Guide to Flexbox – Chris Coyier
W3C Working Draft
What the flexbox?! – Wes Bos
Flexbox Froggy
Using CSS flexible boxes – MDN
Using Flexbox today – Chris Wright
Flexbox – Sara Soueidan
Flexbugs – Philip Walton
RESOURCES
Archibald, J. (2014). Don't use flexbox for overall page layout. [online] Jakearchibald.com. Available at: https://jakearchibald.com/2014/dont-use-flexbox-for-page-layout/ [Accessed 1 Feb. 2016]. Bos, W. (2016). Free Flexbox Video Series. [online] What The FlexBox?! Video Series. Available at: http://flexbox.io/#/view/CFgeJq4l1YM [Accessed 30 Jan. 2016]. Bos, W. (2016). Solve Your Layout Problems With Flexbox. net, (275), pp.84-89. Brennan, P. (2015). CSS Flexbox Explained. [online] front-end tricks. Available at: https://frontendtricks.wordpress.com/2015/03/06/css-flexbox-explained/ [Accessed 1 Feb. 2016]. Coyier, C. (2016). A Complete Guide to Flexbox. [online] Css-tricks.com. Available at: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ [Accessed 1 Feb. 2016]. Fioritto, S. (2016). The Ultimate Flexbox Cheat Sheet. [online] Sketchingwithcss.com. Available at: http://www.sketchingwithcss.com/samplechapter/cheatsheet.html [Accessed 3 Feb. 2016]. Mozilla Developer Network, (2015). Using CSS flexible boxes. [online] Available at: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes [Accessed 2 Feb. 2016]. Storey, D. (2013). Designing CSS Layouts With Flexbox Is As Easy As Pie – Smashing Magazine. [online] Smashing Magazine. Available at: https://www.smashingmagazine.com/2013/05/centering-elements-with-flexbox/ [Accessed 3 Feb. 2016]. W3.org, (2015). CSS Flexible Box Layout Module Level 1. [online] Available at: https://www.w3.org/TR/css-flexbox-1/ [Accessed 1 Feb. 2016]. Walton, P. (2015). Normalizing Cross-browser Flexbox Bugs — Philip Walton. [online] Philipwalton.com. Available at: http://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/ [Accessed 1 Feb. 2016]. Walton, P. (2016). Holy Grail Layout — Solved by Flexbox — Cleaner, hack-free CSS. [online] Philipwalton.github.io. Available at: https://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/ [Accessed 3 Feb. 2016]. Wright, C. (2015). Experiment: Using Flexbox Today. [online] Chris Wright Design. Available at: https://chriswrightdesign.com/experiments/using-flexbox-today/ [Accessed 2 Feb. 2016]. zomigi.com, (2015). Using Modernizr with Flexbox. [online] Available at: http://zomigi.com/blog/using-modernizr-with-flexbox/ [Accessed 2 Feb. 2016].
REFERENCES