FLEXBOX FOR RESPONSIVES WEBDESIGN

Size: px

Start display at page:

Download "FLEXBOX FOR RESPONSIVES WEBDESIGN"

Abner Young
6 years ago
Views:

1 FLEXBOX FOR RESPONSIVES WEBDESIGN

2 ABOUT ME Robert Mittl mittl medien Stuttgart, Germany JUG Stuttgart self employed since 2012 Joomla and Web Development

3 CONTACT ME FB:

4 CSS LAYOUT TECHNIQUES Flexbox CSS-Grid Layout Box Alignment Module

5 DEFINITION OF FLEXBOX Flexbox is a CSS technique to position and adjust easy elements and boxes, as well the size of the box is unknown. Flexbox takes the available space. Flexbox is for 1 dimensional layout. You can control row or columns.

6 DEFINITION OF CSS-GRID AND BOX ALIGNMENT MODULE With CSS-Grid and Box Alignment Modul Items you can position the elements easy in the defined grid system. CSS-Grid is for 2 dimensional layout. You can control row and columns.

7 BUT MIND?

10 back to the topic FLEXBOX

11 WHY SHOULD YOU USE FLEXBOX float and clear not needed easy position elements in boxes vertical center is possible equal height for boxes without javascript flexbox solutions are responsive no CSS Hack - clean lesser code

12 WHO USE FLEXBOX Frameworks Bootstrap 4 Foundation 6 bulma.io, flexboxgrid.com etc. Websites booking.com and now YOU - that will make your life easier

13 CODE

14 AXIS Understanding the axis: main axis cross axis

15 elements PARENT AND CHILD ELEMENTS <div class= container"> <! Parent > <div class= box"></div> <! Child > <div class="box"></div> <div class="box"></div> </div>

16 PARENT ELEMENTS

17 parent elements DEFINE THE PARENT ELEMENT:.container { display:flex; //display:inline-flex;

18 parent elements SET THE DIRECTION > MAIN-AXIS.container { display: flex; flex-direction: row; /*default*/ //row, row-reverse, column, column-reverse row row-rewerse

19 parent elements ALLOW WRAP - CROSS-AXES.container { display:flex; flex-direction:row; flex-wrap: wrap; /*nowrap == default*/

20 parent elements SHORTHAND FOR FLEX-DIRECTION AND FLEX-WRAP.container { display:flex; flex-flow: row-reverse wrap;

21 parent elements ADJUST THE ELEMENTS HORIZONTAL - MAIN-AXES.container { justify-content: flex-start /*flex-end*/ flex-start flex-end

22 parent elements ADJUST THE ELEMENTS HORIZONTAL - MAIN AXES.container { justify-content: center /*space-between*//*space-around*/ center space-between space-around

23 parent elements ADJUST THE ELEMENTS VERTIKAL - CROSS-AXES Condition for this is more rows!.container { align-content: flex-start /*flex-end*/

24 parent elements ADJUST THE ELEMENTS VERTIKAL - CROSS-AXES Condition for this is more rows!.container { align-content: center /*stretch*/ stretch center stretch

25 parent elements ADJUST THE ELEMENTES VERTIKAL.container { align-items: flex-start /*flex-end*//*center*//*stretch*//*baseline*/ flex-end baseline flex-stretch

26 CHILD ELEMENTS

27 child elements CHANGE THE ORDER.box-one { order:2;.box-two { order:3; box-three { order:1;

28 child elements SET THE PROPORTION.box-one { flex-grow:1;.box-two { flex-grow:2; double width box-three { flex-grow:1;

29 child elements FLEX BASIS define the basis, available space will filled up.container { width: 800px.box-one { flex-basis:200px 800px.box-two { flex-basis: 200px.box-three { flex-basis: 200px

30 child elements FLEX-GROW DEPEND FROM FLEX-BASIS.container { width: 800px 200px will be proportioned.box-one { flex-grow:1; flex-basis: 200px.box-two { flex-grow:2; flex-basis:200px.box-three { flex-grow:1; flex-basis:200px

31 child elements FLEX-SHRINK.box-one { flex-shrink:1;.box-two { flex-shrink:0;.box-three { flex-shrink:1;

32 child elements SHORTHAND FOR THE CHILDELEMENTS:.item1,.item3 { flex: px; /*flex-grow: 1; flex-shrink: 0; flex-basis:280px;*/.item2 { flex: px;

33 child elements ALIGN-SELF overwrite the vertical adjustment align-items.box-two { align-self: flex-end; flex-end

34 ACCESSIBILITY the order is changed only in the view Sreenreader will give you the DOM Order

35 EXAMPLES

36 Examples BOXES WITH EQUAL HEIGHT

37 Examples NAVIGATION

38 Examples NAVIGATION

39 Examples SHOP

40 Examples STICKY FOOTER <body class="site"> <header> </header> <main class= Site-content"> </main> <footer> </footer> </body>.site { display: flex; min-height: 100vh; flex-direction: column;.site-content { flex: 1;

41 Examples USE CASES - POSSIBILITIES forms products with buttons navigation Sticky Footer Footer - navigation and social icons Please attend - Flexbox is not a Grid System

42 Summary PARENT ELEMENTS display:flex inline-flex; flex-direction: row row-reverse column column-reverse; flex-wrap: nowrap wrap wrap-reverse; justify-content: flex-start flex-end center space-between space-around; align-items: flex-start flex-end center baseline stretch; align-content: flex-start flex-end center space-between space-around stretch;

43 Summary CHILD ELEMENTS order: <integer>; flex-grow: <number>; /* default 0 */ flex-shrink: <number>; /* default 1 */ flex-basis: <length> auto; /* default auto */ flex: none [ <'flex-grow'> <'flex-shrink'>? <'flex-basis'> ] align-self: auto flex-start flex-end center baseline stretch;

44 Summary ADVANTAGES OF FLEXBOX order or/and column-reverse or order-reverse enables a new positioning of content and navigation elements less code for more responsiveness

45 BROWSER PREFIXES recommended prefixes are Microsoft IE 10, Safari 9 or use Sass Mixins for all

46 Fallback FALLBACK Is a Fallback really necessary? Which client, who will visit the website? Which requirements on client side? In most cases looks the website without fallback on older browsers bader, but okay.

47 Fallback FALLBACK Possibilities for fallbacks: display: float; display: table; //easy technique to position elements.container { display: flex; //older browser will not understand flex and ignore it display:table;.flex-item { display: table-cell; /*Fallback IE9*/

48 Fallback FALLBACK JS Polyfill for IE8/IE9 PostCSS for IE8/IE9

49 You can you to separate your CSS. You can handle (display: block) {.old-browser { (display: flex){.flex-browser{

50 Fallback MODERNIZER You will create a special design use Modernizer:.flexbox.container { //this code is only for flexbox browsers.no-flexbox.container { //this code is only for none flexbox browsers

51 Fallback MODERNIZER You will create a special design use Modernizer:.flexbox.container { //this code is only for flexbox browsers.no-flexbox.container { //this code is only for none flexbox browsers

52 Fallback SOURCES Solved by Flexbox from Philip Walton Flexbox Bugs

53 Sources SOURCES: CSS Tricks: visual Guide Flexbox product page flexbox playground and code generator flexyboxes/ CSSConf)

54 Sources PODCASTS Full Stack Radio (Episode 24) CTRL+CLiCK Cast

55 Sources LEARNING WITH COOL GAMES: Flexbox Froggy Flexbox Defense

56 Fallback SPECIAL THANKS - Sara - Chris - Rachel Philip Walton

57 QUESTIONS?

58 THANK YOU

59 CONTACT ME Speak to me OR FB:

60 SLIDES

CSC Website Design, Spring CSS Flexible Box

CSC Website Design, Spring CSS Flexible Box CSC 122 - Website Design, Spring 2017 CSS Flexible Box CSS Flexible Box Layout Module The CSS flexbox can be used to ensure that elements behave predictably when the page layout must accommodate different