Lauren Pittenger
I'm a front end web designer
Lauren Pittenger
@laurenpittenger
What the Flexbox?
An Intro to Flexbox
What is flexbox?
A layout mode which positions elements on a page in a way that is predictable and flexible.
Doesn't use floats and margins don't collapse.
Many designers find it easier to use.
Flexbox Layout Mode
Flex Container
display: flexFlex Items
Main Axis
The main axis is the axis along which the flex items follow each other.
Cross Axis
The cross axis is the axis perpendicular to the main axis.
Main & Cross Sizes
Flex Container Properties
Flex Direction: Row
Defines the main and cross axis and controls how flex items are placed in container.
flex-direction: row | row-reverse | column | column-reverse
Flex Container Properties
Flex Direction: Row Reverse
Defines the main and cross axis and controls how flex items are placed in container.
flex-direction: row | row-reverse | column | column-reverse
Flex Container Properties
Flex Direction: Column
Defines the main and cross axis and controls how flex items are placed in container.
flex-direction: row | row-reverse | column | column-reverse
Flex Container Properties
Flex Direction: Column Reverse
Defines the main and cross axis and controls how flex items are placed in container.
flex-direction: row | row-reverse | column | column-reverseFlexbox Layout Mode
Flex Container Properties
Justify Content: Flex Start
Defines how space is distributed along the main axis.
justify-content: flex-start | flex-end | center | space-between | space-around
Flex Container Properties
Justify Content: Flex End
Defines how space is distributed along the main axis.
justify-content: flex-start | flex-end | center | space-between | space-around
Flex Container Properties
Justify Content: Center
Defines how space is distributed along the main axis.
justify-content: flex-start | flex-end | center | space-between | space-around
Flex Container Properties
Justify Content: Space Between
Defines how space is distributed along the main axis.
justify-content: flex-start | flex-end | center | space-between | space-around
Flex Container Properties
Justify Content: Space Around
Defines how space is distributed along the main axis.
justify-content: flex-start | flex-end | center | space-between | space-around
Flex Container Properties
Flex Wrap: Nowrap
Specifies whether items on a line should be forced onto one line or flow onto a next line.
flex-wrap: nowrap | wrap | wrap-reverse
Flex Container Properties
Flex Wrap: Wrap
Specifies whether items on a line should be forced onto one line or flow onto a next line.
flex-wrap: nowrap | wrap | wrap-reverse
Flex Container Properties
Flex Wrap: Wrap Reverse
Specifies whether items on a line should be forced onto one line or flow onto a next line.
flex-wrap: nowrap | wrap | wrap-reverseAlign Items: Flex Start
Flex Container Properties
Defines how space is distributed along the cross axis.
align-items: flex-start | flex-end | center | baseline | stretch
Flex Container Properties
Align Items: Center
Defines how space is distributed along the cross axis.
align-items: flex-start | flex-end | center | baseline | stretch
Flex Container Properties
Align Items: Baseline
Defines how space is distributed along the cross axis.
align-items: flex-start | flex-end | center | baseline | stretch
Flex Container Properties
Align Items: Stretch
Defines how space is distributed along the cross axis.
align-items: flex-start | flex-end | center | baseline | stretchAlign Content
Flex Container Properties
stretch
space-between
space-around
flex-start
flex-end
center
Aligns a flex container’s lines on the cross axis when there is extra space along the cross axis. It has no effect on a single line of flex items.
align-content: flex-start | flex-end | center | space-between | space-around | stretchAlign Self
Flex Item Properties
Overrides align-items value. Ignored if flex item’s cross-axis margin is set to auto.
align-self: auto | flex-start | flex-end | center | baseline | stretch
Order
Flex item Properties
Specifies order items should appear within the flex container. Laid out in ascending order. Elements with the same order appear in the order of the source code.
order: <integer>Resources
What the Flexbox?
By Lauren Pittenger
What the Flexbox?
An intro to Flexbox.
