View
1.702
Download
3
Category
Preview:
Citation preview
The Power of CSS FlexboxGaurav Gupta
@FrshBakedPixels #edui_flexbox
About me
IT Analyst
Division of Learning Innovation and Student Success
Virginia Commonwealth University
@FrshBakedPixels
#edui_flexbox
Evolution of layout methods
@FrshBakedPixels #edui_flexbox
Table Div + Float Grid ResponsiveWeb Design
Flexbox
float:left float: right
Table Div + Float Grid ResponsiveWeb Design
Flexbox
Table Div + Float Grid ResponsiveWeb Design
Flexbox
12 columns
4 columns
6 columns 6 columns
4 columns 4 columns
Table Div + Float Grid ResponsiveWeb Design
Flexbox
Media Queries
12 3
@media(max-width:600px){/*CSSforsmallscreens*/}
Table Div + Float Grid ResponsiveWeb Design
Flexbox
1
2
3
@media(max-width:600px){/*CSSforsmallscreens*/}
Table Div + Float Grid ResponsiveWeb Design
Flexbox
Media Queries
The CSS3 Flexible Box, or flexbox, is a layout mode providing for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes and different display devices.
- Mozilla Developer Network
“Table Div + Float Grid Responsive
Web DesignFlexbox
Basics
@FrshBakedPixels #edui_flexbox
<divclass="parent"><divclass="childbox1">1</div><divclass="childbox2">2</div><divclass="childbox3">3</div><divclass="childbox4">4</div><divclass="childbox5">5</div></div>
12345
1 2 3 4 5
.parent{display:flex}
1 2 3 4 5
Main Axis
Cros
s Ax
is
1 2 3 4 5
Main Axis
Cros
s Ax
is
.parent{display:flex;flex-direction:row;/*default*/}
12345
.parent{display:flex;flex-direction:column;}
12345
.parent{display:flex;flex-direction:row-reverse;}
12345
.parent{display:flex;flex-direction:column-reverse;}
Wrapping items
@FrshBakedPixels #edui_flexbox
1 2 3 4 5
1 2 3 4 5 6 7 8 9 0
1 2 3 4 5 6 78 9 0
.parent{display:flex;flex-wrap:wrap;}
1 2 3 4 5 6 78 9 0
.parent{display:flex;flex-wrap:wrap-reverse;}
1234567
890
.parent{display:flex;flex-direction:column;flex-wrap:wrap;}
Aligning items
@FrshBakedPixels #edui_flexbox
justify-content aligns items along main axis
align-content aligns rows of items along cross axis
align-items aligns items in a single row along cross axis
justify-content aligns items along main axis
align-content aligns rows of items along cross axis
align-items aligns items in a single row along cross axis
1 2 3 4 5
.parent{display:flex;justify-content:flex-start;/*default*/}
1 2 3 4 5
.parent{display:flex;justify-content:flex-end;}
1 2 3 4 5
.parent{display:flex;justify-content:center;}
1 2 3 4 5
.parent{display:flex;justify-content:space-between;}
1 2 3 4 5
.parent{display:flex;justify-content:space-around;}
justify-content aligns items along main axis
align-content aligns rows of items along cross axis
align-items aligns items in a single row along cross axis
1 2 34 5 67 8 9
.parent{display:flex;flex-wrap:wrap;align-content:flex-start;}
1 2 34 5 67 8 9
.parent{display:flex;flex-wrap:wrap;align-content:flex-end;}
1 2 34 5 67 8 9
.parent{display:flex;flex-wrap:wrap;align-content:center;}
1 2 3
4 5 6
7 8 9
.parent{display:flex;flex-wrap:wrap;align-content:space-between;}
1 2 3
4 5 6
7 8 9
.parent{display:flex;flex-wrap:wrap;align-content:space-around;}
1 2 3
4 5 6
7 8 9
.parent{display:flex;flex-wrap:wrap;align-content:stretch;/*default*/}
justify-content aligns items along main axis
align-content aligns rows of items along cross axis
align-items aligns items in a single row along cross axis
.parent{display:flex;align-items:flex-start;}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet diam feugiat
ullamcorper nunc vel, sodales mi. Aliquam tempor enim at arcu finibus, et consectetur mi blandit. Vestibulum semper commodo tempor. Ut venenatis euismod
Proin ex lectus, pellentesque eget est sit amet, euismod maximus arcu
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras eu elementum dui. In feugiat feugiat turpis.
.parent{display:flex;align-items:flex-end;}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet diam feugiat
ullamcorper nunc vel, sodales mi. Aliquam tempor enim at arcu finibus, et consectetur mi blandit. Vestibulum semper commodo tempor. Ut venenatis euismod
Proin ex lectus, pellentesque eget est sit amet, euismod maximus arcu
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras eu elementum dui. In feugiat feugiat turpis.
.parent{display:flex;align-items:center;}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet diam feugiat
ullamcorper nunc vel, sodales mi. Aliquam tempor enim at arcu finibus, et consectetur mi blandit. Vestibulum semper commodo tempor. Ut venenatis euismod
Proin ex lectus, pellentesque eget est sit amet, euismod maximus arcu
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras eu elementum dui. In feugiat feugiat turpis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet diam feugiat
ullamcorper nunc vel, sodales mi. Aliquam tempor enim at arcu finibus, et consectetur mi blandit. Vestibulum semper commodo tempor. Ut venenatis euismod
Proin ex lectus, pellentesque eget
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras eu elementum dui. In feugiat feugiat turpis.
.parent{display:flex;align-items:baseline;}
.parent{display:flex;align-items:stretch;/*default*/}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet diam feugiat
ullamcorper nunc vel, sodales mi. Aliquam tempor enim at arcu finibus, et consectetur mi blandit. Vestibulum semper commodo tempor. Ut venenatis euismod
Proin ex lectus, pellentesque eget est sit amet, euismod maximus arcu
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras eu elementum dui. In feugiat feugiat turpis.
.parent{display:flex;align-items:stretch;}.box3{align-self:flex-end;/*overrideindividualchild*/}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet diam feugiat
ullamcorper nunc vel, sodales mi. Aliquam tempor enim at arcu finibus, et consectetur mi blandit. Vestibulum semper commodo tempor. Ut venenatis euismod
Proin ex lectus, pellentesque eget est sit amet, euismod maximus arcu
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras eu elementum dui. In feugiat feugiat turpis.
Changing item order
@FrshBakedPixels #edui_flexbox
1 2 3 4 5
.child{order:0}/*default*/
1 2 345
.box3{order:1}
.box5{order:-1}
1 2 345
.box3{order:1}
.box5{order:-1}
order:-10001
“Flexing” items
@FrshBakedPixels #edui_flexbox
.child{flex:11200px;}
.child{flex:11200px;}
flex-basisflex-grow
flex-shrink
flex is applied to child elements
flex-basis baseline width auto
flex-grow proportion of extra width an item will get if extra space available
0
flex-shrink proportion of width it will give up if needed
1
.child{flex:01auto}/*default*/
≫
.child{flex:10auto}
flex-grow flex-shrink
.child{flex:1010%}
.child{flex:1020%}
.child{flex:1025%}
.child{flex:1025%}
.child{flex:1125%}
.child{flex:10auto}
.box1{flex:100auto}
.child{flex:10auto}
.box1{flex:100auto}
.box2{flex:100auto}
≫
Real world examples
@FrshBakedPixels #edui_flexbox
Example 1: Vertical align
@FrshBakedPixels #edui_flexbox
Look Ma, I'm vertically aligned!
Look Ma, I'm vertically aligned!
.parent{display:flex;align-items:center;justify-content:center;}
Look Ma, I'm vertically aligned! So am I!
.parent{display:flex;align-items:center;justify-content:center;}
Look Ma, I'm vertically aligned!
So am I!
.parent{display:flex;align-items:center;justify-content:center;flex-direction:column;}
Example 2: Equal height columns
@FrshBakedPixels #edui_flexbox
Columns with grid layout
Columns with flexbox
≫
.row{display:flex;flex-wrap:wrap;}.card-link{flex:10250px;display:flex;flex-direction:column;}.button{margin-top:auto;}
Example 3: Grid vs. Flexbox
@FrshBakedPixels #edui_flexbox
col-4 col-4 col-4
col-3 col-3 col-3 col-3
? ? ? ??
Web app navigation
.parent{display:flex;}.child{flex:1010%;}
.parent{display:flex;}.child{flex:1010%;}
the CSS code stays the same for 3, 4 or 5 items
Example 4: Reordering content
@FrshBakedPixels #edui_flexbox
@media(max-width:1000px)and(orientation:landscape){.Breadcrumbs{order:1;}nav{order:2;}footer{order:3;}}
≫
≫
Example 5: Alignment Shifting Wrapping
@FrshBakedPixels #edui_flexbox
Source: https://css-tricks.com/useful-flexbox-technique-alignment-shifting-wrapping/ ≫
.flex-title{display:flex;align-items:flex-end;flex-wrap:wrap;}
.flex-title.title-main{flex-grow:1;}
Browser support
@FrshBakedPixels #edui_flexbox
Source: http://caniuse.com/#search=flexbox
.parent{display:flex;align-items:center;}.child{flex:01auto;}
.parent{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}.child{-webkit-box-flex:0;-webkit-flex:01auto;-ms-flex:01auto;flex:01auto;}
Browser prefixes
Supporting older browsers
Use fallbacks .parent{display:table;display:flex;}.child{display:table-cell;width:20%;flex:1020%;}
Use Modernizr .no-flexbox.parent{display:table;}.flexbox.parent{display:flex;}
Resources• Flexbox cheat sheet
https://css-tricks.com/snippets/css/a-guide-to-flexbox
• Using Flexbox: Mixing Old and New for the Best Browser Support https://css-tricks.com/using-flexbox/
• Video: Enhancing Responsiveness with Flexboxhttps://vimeo.com/124796320
• Autoprefixerhttps://github.com/postcss/autoprefixer
• Modernizrhttp://modernizr.com/
Recommended