$30 off During Our Annual Pro Sale. View Details »

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
Tweet

More Decks by Jennifer Bland

Other Decks in Programming

Transcript

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

    View Slide

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

    View Slide

  3. CSS History
    •Support for the box model
    •Float images to right or leC of each other
    •PosiEoning using Absolute and Fixed

    View Slide

  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

    View Slide

  5. Flexbox Benefits
    •W3C Standard
    •No libraries needed
    •No longer need floats and clears
    •Override source order with CSS
    •Custom responsive layouts

    View Slide

  6. Flexbox Support

    View Slide

  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

    orientaEon

    View Slide

  8. Defining Flex Elements
    •First define elements on page as Flex Containers
    •In css add

    display: flex;
    Example_01

    View Slide

  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

    View Slide

  10. Flex-DirecEon
    •Flex Container direcEon can be either row or column
    •Defined by flex-direcEon
    •Default is row
    Example_02

    View Slide

  11. Flex Container is Row

    View Slide

  12. Flex Container is Column

    View Slide

  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

    View Slide

  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

    View Slide

  15. flex-flow shorthand
    •Shorthand for flex-direcEon and flex-wrap properEes
    •Default is row nowrap
    Example_05

    View Slide

  16. Flex Grow
    •Represents how much the flex item will grow relaEve

    to the rest of the flex items in the container once

    posiEve space has been distributed
    •Default value is 0

    View Slide

  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

    View Slide

  18. Flex Basis
    •Represents iniEal main size of a flex item before

    free space is distributed
    •Default value is 0

    View Slide

  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

    View Slide

  20. Real World Example - Calculator
    •Using flex-grow, flex-shrink and flex-basis we can

    finish styling on our calculator
    Example_06

    View Slide

  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

    View Slide

  22. JusEfy Content
    •Defines alignment along the main axis
    •Distributes extra free space leC over
    •Default: flex-start

    View Slide

  23. JusEfy Content - row
    Example_07

    View Slide

  24. JusEfy Content - column
    Example_08

    View Slide

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

    along the cross axis on the current line
    •Default: stretch

    View Slide

  26. Align Items

    View Slide

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

    extra space in the cross axis
    •Default: stretch

    View Slide

  28. Align Content

    View Slide

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

    View Slide

  30. NavigaEon

    View Slide

  31. Center Image on Screen

    View Slide

  32. Responsive Website Layout

    View Slide

  33. Input Addon

    View Slide

  34. 3 Column Layout

    View Slide

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

    View Slide