the power of css flexbox

The Power of CSS FlexboxGaurav Gupta

@FrshBakedPixels #edui_flexbox

Slides tiny.cc/flexboxslides


http://tiny.cc/flexboxslides

About me

IT Analyst

Division of Learning Innovation and Student Success

Virginia Commonwealth University

@FrshBakedPixels

#edui_flexbox

Evolution of layout methods


Table Div + Float Grid ResponsiveWeb Design

Flexbox

float:left float: right


Flexbox


Flexbox

12 columns

4 columns

6 columns 6 columns

4 columns 4 columns


Flexbox

Media Queries

12 3

@media(max-width:600px){/*CSSforsmallscreens*/}


Flexbox

1

2

3

@media(max-width:600px){/*CSSforsmallscreens*/}


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


Demo code tiny.cc/flexboxdemo


http://tiny.cc/flexboxdemo

<divclass="parent"><divclass="childbox1">1</div><divclass="childbox2">2</div><divclass="childbox3">3</div><divclass="childbox4">4</div><divclass="childbox5">5</div></div>

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


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


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;}

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*/}

.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;}





.parent{display:flex;align-items:center;}







Proin ex lectus, pellentesque eget


.parent{display:flex;align-items:baseline;}

.parent{display:flex;align-items:stretch;/*default*/}





.parent{display:flex;align-items:stretch;}.box3{align-self:flex-end;/*overrideindividualchild*/}





Changing item order


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


.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


Example 1: Vertical align


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;}


So am I!

.parent{display:flex;align-items:center;justify-content:center;flex-direction:column;}

Example 2: Equal height columns


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


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


@media(max-width:1000px)and(orientation:landscape){.Breadcrumbs{order:1;}nav{order:2;}footer{order:3;}}

Example 5: Alignment Shifting Wrapping


Source: https://css-tricks.com/useful-flexbox-technique-alignment-shifting-wrapping/ ≫

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


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/

https://css-tricks.com/snippets/css/a-guide-to-flexbox

https://css-tricks.com/using-flexbox/

https://vimeo.com/124796320

http://modernizr.com/

http://modernizr.com/

the power of css flexbox

Technology