Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Intro to Flexbox with Real Word Examples

Intro to Flexbox with Real Word Examples

If you hate floats, you will love flexbox. If you hate media queries, you will love Flexbox. Flexbox gives you more control in creating a responsive layout than the traditional box model. In this session I will introduce you to Flexbox by showing how to use it to solve common website problems. You will learn how easy it is to implement Flexbox into your existing website design.

Jennifer Bland

September 21, 2017

More Decks by Jennifer Bland

Other Decks in Programming


  1. by Jennifer Bland Intro to Flexbox with real world examples

  2. Get the Code h)ps://github.com/jenniferbland/intro-to-flexbox

  3. CSS History •Support for the box model •Float images to

    right or leC of each other •PosiEoning using Absolute and Fixed
  4. Why Flexbox? •One of several new CSS layout models •Designed

    to make craCing CSS layouts easy •Allows you to control alignment, spacing and
 sizing of elements relaEve to their parents
  5. Flexbox Benefits •W3C Standard •No libraries needed •No longer need

    floats and clears •Override source order with CSS •Custom responsive layouts
  6. Flexbox Support

  7. Using Flexbox •Define a parent element as a Flex Container

    •All child elements become Flex Items •Flexbox properEes can then control orientaEon,
 alignment, size and spacing of child Flex Items •Flex Containers are set to either row or column
  8. Defining Flex Elements •First define elements on page as Flex

    Containers •In css add
 display: flex; Example_01
  9. Understanding Flex Axis •Flexbox has a main axis and a

    cross axis which 
 control the distribuEon and layout of elements • main axis - is the axis along which the flex items
 follow each other • cross axis - axis perpendicular to the main axis
  10. Flex-DirecEon •Flex Container direcEon can be either row or column

    •Defined by flex-direcEon •Default is row Example_02
  11. Flex Container is Row

  12. Flex Container is Column

  13. Real Word Example - Calculator •Using what we have earned

    about Flex Container 
 and Flex Items we will start creaEng our calculator Example_03a & b
  14. Content Wrapping •By default all Flexbox Containers are single lined

    •Size, align and space Flex Items along that single line •Use flex-wrap property to get Flex Items to wrap
 to a new line •Default value is nowrap Example_04
  15. flex-flow shorthand •Shorthand for flex-direcEon and flex-wrap properEes •Default is

    row nowrap Example_05
  16. Flex Grow •Represents how much the flex item will grow

 to the rest of the flex items in the container once
 posiEve space has been distributed •Default value is 0
  17. Flex Shrink •Represents how much the flex item will shrink

 relaEve to the rest of the flex items in the container
 once negaEve space has been distributed •Default value is 1
  18. Flex Basis •Represents iniEal main size of a flex item

 free space is distributed •Default value is 0
  19. Flex Property •Flex Grow •Flex Shrink •Flex Basis •These properEes

    are used to define flex item size in
 relaEon to other flex items and how to grow or shrink
  20. Real World Example - Calculator •Using flex-grow, flex-shrink and flex-basis

    we can
 finish styling on our calculator Example_06
  21. Controlling Alignment •Flex Container has two axis - main axis

    and cross axis •There are controls for controlling alignment on either
 main axis or cross axis
  22. JusEfy Content •Defines alignment along the main axis •Distributes extra

    free space leC over •Default: flex-start
  23. JusEfy Content - row Example_07

  24. JusEfy Content - column Example_08

  25. Align Items •Sets default behavior for how Flex Items are

    laid out
 along the cross axis on the current line •Default: stretch
  26. Align Items

  27. Align Content •Aligns a Flex Container’s lines within when there

 extra space in the cross axis •Default: stretch
  28. Align Content

  29. Real Word Examples h)ps://github.com/jenniferbland/made-with-flexbox

  30. NavigaEon

  31. Center Image on Screen

  32. Responsive Website Layout

  33. Input Addon

  34. 3 Column Layout

  35. h)p://www.jenniferbland.com h)ps://github.com/jenniferbland/ [email protected] @ratracegrad