Working with Flexbox

The modern way to change the way

our elements are displayed
 Understanding Flexbox

Property Property

display: flex;

flex-flow:
Parent Children
= =
Flex Container Flex Items
justify-content: order:

align-content: flex:

align-items: align-self:
 Main Axis vs. Cross Axis

main main

flex-direction: flex-direction:
row; row-reverse;
cross cross

cross

main
flex-direction: flex-direction:
column; column-reverse;
main

cross
 Align Items and Justify Content

flex-direction: row flex-direction: column

main cross

cross justify-content main align-items

align-items justify-content
 Understanding Flexbox

Property Property

display: flex;

flex-flow:
Parent Children
= =
Flex Container Flex Items
justify-content: order:

align-content: flex:

align-items: align-self:
 Summary

Flexbox Flex Container Flex Container - Properties

• Changes the way elements
are displayed on a website
• Flexbox consists of the
Flex-Container and Flex-
Items
Main Axis vs Cross Axis
• flex-direction defines
main axis
• Properties refer to main or
cross axis
• Behaviour of Flex-Items
changes depending on
flex-direction
• Adding display: flex to display: (inline-)flex
an element will turn it into a flex-direction
Flex-Container flex-wrap
flex-flow (shorthand)
align-items
Flex Items
justify-content
• All elements/children of the align-content
Flex-Container will become
Flex Items - Properties
Flex-Items
• Behaviour can be changed order
by properties applied to the align-self
Flex-Container and applied flex-grow
to individual Flex-Items flex-shrink
flex-basis
flex (shorthand)