Intro to Flexbox with Real Word Examples

Slide 1

Slide 1 text

by Jennifer Bland Intro to Flexbox with real world examples

Slide 2

Slide 2 text

Get the Code h)ps://github.com/jenniferbland/intro-to-ﬂexbox

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Flexbox Beneﬁts •W3C Standard •No libraries needed •No longer need ﬂoats and clears •Override source order with CSS •Custom responsive layouts

Slide 6

Slide 6 text

Flexbox Support

Slide 7

Slide 7 text

Using Flexbox •Deﬁne 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

Slide 8

Slide 8 text

Defining Flex Elements •First define elements on page as Flex Containers •In css add  display: flex; Example_01

Slide 9

Slide 9 text

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 ﬂex items  follow each other • cross axis - axis perpendicular to the main axis

Slide 10

Slide 10 text

Flex-DirecEon •Flex Container direcEon can be either row or column •Deﬁned by ﬂex-direcEon •Default is row Example_02

Slide 11

Slide 11 text

Flex Container is Row

Slide 12

Slide 12 text

Flex Container is Column

Slide 13

Slide 13 text

Real Word Example - Calculator •Using what we have earned about Flex Container   and Flex Items we will start creaEng our calculator Example_03a & b

Slide 14

Slide 14 text

Content Wrapping •By default all Flexbox Containers are single lined •Size, align and space Flex Items along that single line •Use ﬂex-wrap property to get Flex Items to wrap  to a new line •Default value is nowrap Example_04

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Flex Grow •Represents how much the ﬂex item will grow relaEve  to the rest of the ﬂex items in the container once  posiEve space has been distributed •Default value is 0

Slide 17

Slide 17 text

Flex Shrink •Represents how much the ﬂex item will shrink   relaEve to the rest of the ﬂex items in the container  once negaEve space has been distributed •Default value is 1

Slide 18

Slide 18 text

Flex Basis •Represents iniEal main size of a ﬂex item before  free space is distributed •Default value is 0

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Real World Example - Calculator •Using flex-grow, flex-shrink and flex-basis we can  finish styling on our calculator Example_06

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

JusEfy Content •Deﬁnes alignment along the main axis •Distributes extra free space leC over •Default: ﬂex-start

Slide 23

Slide 23 text

JusEfy Content - row Example_07

Slide 24

Slide 24 text

JusEfy Content - column Example_08

Slide 25

Slide 25 text

Align Items •Sets default behavior for how Flex Items are laid out  along the cross axis on the current line •Default: stretch

Slide 26

Slide 26 text

Align Items

Slide 27

Slide 27 text

Align Content •Aligns a Flex Container’s lines within when there is  extra space in the cross axis •Default: stretch

Slide 28

Slide 28 text

Align Content

Slide 29

Slide 29 text

Real Word Examples h)ps://github.com/jenniferbland/made-with-ﬂexbox

Slide 30

Slide 30 text

NavigaEon

Slide 31

Slide 31 text

Center Image on Screen

Slide 32

Slide 32 text

Responsive Website Layout

Slide 33

Slide 33 text

Input Addon

Slide 34

Slide 34 text

3 Column Layout

Slide 35

Slide 35 text

h)p://www.jenniferbland.com h)ps://github.com/jenniferbland/ jennifer@jenniferbland.com @ratracegrad