Flexbox a CSS layout technique that make sense

Flexbox a CSS layout technique that make sense

42fa25d4b5521edb08f44eb55c868822?s=128

Maddane Motaquillah

February 10, 2016
Tweet

Transcript

  1. Flexbox a CSS layout technique that make sense ngParty Motaquillah

    Maddane @electrik_frog
  2. I’m Motaki @electrik_frog electrik-frog.com

  3. I’m Motaki Frontend Developer @

  4. I’m Motaki Open source Projects

  5. I’m Motaki Open source Projects

  6. Why? General Concepts Deep dive into the properties

  7. Why? General Concepts Deep dive into the properties

  8. Why? General Concepts Deep dive into the properties

  9. WHY?

  10. CSS Problems* (a.k.a why you hate CSS) *

  11. CSS hard!

  12. Story Time

  13. Me after that

  14. I failed because building layouts is hard.

  15. Some attempts to fix that

  16. Tables

  17. Float: not-right-at-all;

  18. inline-block

  19. If you know what I’m saying!

  20. A lot of unresolved mysteries

  21. Sticky footer

  22. None
  23. Equal height columns

  24. None
  25. None
  26. Vertical centering

  27. Insert Space/sticky footer joke we discovered water on mars

  28. Me trying to center vertically

  29. Flexbox

  30. General Concepts* (aka theory time) *

  31. Flex Container Will contain the Flex Items

  32. Flex Item Building block of a Flex container

  33. Main axis Defines the flow of the items on the

    container
  34. Cross axis Defines the flow of the items on the

    container
  35. Main axis Always keep this in mind Cross axis

  36. Flex Properties* (a.k.a When things get interesting) *

  37. Flex container

  38. Display: Flex; Activates the magic Container

  39. Flex-direction Defines the main/cross axis of the container Container

  40. Flex-direction 1 2 3 Row Items flow from left to

    right *Default Container Main axis
  41. Flex-direction 1 2 3 Row Items flow from left to

    right *Default Container Main axis Cross axis
  42. Flex-direction Container 1 2 3 Column Items flow from top

    to bottom Main axis
  43. Flex-direction Container 1 2 3 Column Items flow from top

    to bottom Main axis Cross axis
  44. Flex-wrap Where the magic happens Container

  45. Container Flex-wrap nowrap *Default Do nothing when there’s no enough

    space
  46. Container Flex-wrap wrap push when there’s no extra space

  47. Container Justify-content Controls the alignment of Flex Items on the

    main axis
  48. *Default 1 2 3 Justify-content Container Flex-start Elements are positioned

    at the start Main axis
  49. 1 2 3 Justify-content Container Flex-end Elements are positioned at

    the end Main axis
  50. 1 2 3 Justify-content Container center Elements are centered Main

    axis
  51. 1 2 3 Justify-content Container space-between Space is evenly distributed

    between the items Main axis
  52. 1 2 3 Justify-content Container space-around Space is evenly distributed

    around and between the items Main axis
  53. Container align-items Controls the alignment of Flex Items on the

    cross axis
  54. align-items Container Flex-start Elements are positioned at the start Cross

    axis
  55. 4 align-items Container Flex-end Elements are positioned at the end

    Cross axis
  56. align-items Container center Elements are centered Cross axis

  57. None
  58. *Default stretch Elements are stretched align-items Container Cross axis

  59. ITEM

  60. order controls the order of flex items Item

  61. Item order Item integer -1 1 2 the item with

    the lowest order will go first 1
  62. Flex: ; Where the magic happens Item

  63. Flex: <flex-grow> <flex-shrink> <flex-basis>; shorthand for 3 other properties Item

  64. The base size of the flex item before space distribution

    Item flex-basis
  65. Item flex-basis Item css length unit the base length of

    the flex item equals the specified length 270px 3em 30%
  66. Item flex-basis Item auto the base length of the flex

    item equals its content content
  67. Defines the ability of an item to grow when space

    is available Item flex-grow
  68. Item flex-grow Item flex-grow: x; * Positive number * Defines

    the ability of an item to grow when space is available 100px 20px 20px 0 0 Free space
  69. Item flex-grow Item flex-grow: x; * Positive number * Defines

    the ability of an item to grow when space is available 100px 20px Free space 1 20px 0
  70. Item flex-grow Item flex-grow: x; * Positive number * Defines

    the ability of an item to grow when space is available 100px 20px 20px 0 1
  71. Item flex-grow Item flex-grow: x; * Positive number * Defines

    the ability of an item to grow when space is available 100px 20px 20px 1 1
  72. Item flex-grow Item flex-grow: x; * Positive number * Defines

    the ability of an item to grow when space is available 100px 20px 20px 1 1
  73. Defines the ability of an item to shrink when there’s

    no available space Item flex-shrink
  74. Item flex-grow Item * Positive number * 40px 40px flex-shrink:

    x; Defines the ability of an item to shrink when there’s no available space
  75. Item flex-grow Item * Positive number * 60px 40px 40px

    flex-shrink: x; Defines the ability of an item to shrink when there’s no available space
  76. Item flex-grow Item * Positive number * 60px 40px 40px

    flex-shrink: x; 0 0 Defines the ability of an item to shrink when there’s no available space
  77. Item flex-grow Item * Positive number * 60px 40px 40px

    flex-shrink: x; 0 0 Defines the ability of an item to shrink when there’s no available space Needed space (20px)
  78. Item flex-grow Item * Positive number * 60px 40px 40px

    flex-shrink: x; 1 0 Defines the ability of an item to shrink when there’s no available space Needed space (20px)
  79. Item flex-grow Item * Positive number * 60px 20px 40px

    flex-shrink: x; 1 0 Defines the ability of an item to shrink when there’s no available space Needed space (20px)
  80. Item flex-grow Item * Positive number * 60px 20px 40px

    flex-shrink: x; 1 1 Defines the ability of an item to shrink when there’s no available space Needed space (20px)
  81. Item flex-grow Item * Positive number * 60px 30px 30px

    flex-shrink: x; 1 1 Defines the ability of an item to shrink when there’s no available space Needed space (20px)
  82. You right now

  83. Hope not!!

  84. Show me code* (a.k.a examples time)

  85. Browser Support

  86. 95.31% * c a n i u s e .

    c o m /f l ex b ox *
  87. 10+ only Oh yeah Come’on Of course Yes! Kinda saw

    this one coming!
  88. Autoprefixer

  89. REFERENCES

  90. REFERENCES CSS Tricks Flexbox Guide Flexbox.io Flexboxfroggy.com

  91. REFERENCES CSS Tricks Flexbox Guide Flexbox.io Flexboxfroggy.com

  92. REFERENCES CSS Tricks Flexbox Guide Flexbox.io Flexboxfroggy.com

  93. Closing Thoughts

  94. ありがとう* I can’t read it too but it means THANK

    YOU *