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.

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
orientaEon

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 relaEve
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 before
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 is
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/
jennifer@jenniferbland.com
@ratracegrad