Skip to content

Instantly share code, notes, and snippets.

@suyesh
Created March 5, 2017 18:03
Show Gist options
  • Save suyesh/630bea75cc12dace8033d75313cbc2d7 to your computer and use it in GitHub Desktop.
Save suyesh/630bea75cc12dace8033d75313cbc2d7 to your computer and use it in GitHub Desktop.

Flexbox

Visual in-class guide

CSS Tricks Flexbox reference

Flexbox Froggy

Flexbox changes a container's child elements into inline, flexible elements

Flexbox is a single-direction layout concept -- direction can be either column or row

Important defaults

Direction -- Default setting is row, which is horizontal

Main Axis -- Follows direction. Because direction is row by default, the Main Axis is also horizontal

Cross Axis -- Perpendicular to Main Axis, so default is vertical

Common Flex properties

Keep in mind -- you don't have to state every property!

Flex Container ( outer div -- parent element )

CSS Property Values Description Default value
display flex Turns the element into a Flex Container (required) block
flex-direction row
column
Establishes the Main Axis row
justify-content flex-start
flex-end
center
space-around
space-between
Arrangement of Flex Items along the Main Axis.
Defined by flex-direction
flex-start
align-items flex-start
flex-end
center
stretch
baseline
Arrangement of Flex Items along the Cross Axis.
Defined by flex-direction
flex-start
flex-wrap wrap
nowrap
How Flex Items behave when they can't fit on one line (due to browser size)
Defined by flex-direction
nowrap
flex-flow row nowrap
row wrap
column nowrap
column wrap
row reverse
column reverse
Shorthand for flex-direction + flex-wrap row nowrap

Note: When using stretch, height needs to be accounted fors

Important -- Changing flex-direction to column does NOT arrange the Flex Items along the container's Cross Axis. It converts the Flex Container's Main Axis from horizontal to vertical. Which means the Cross Axis becomes horizontal

  • justify-content still refers to Main Axis (which is now vertical)
  • align-items still refers to Cross Axis (which is now horizontal)

Flex Items ( inner divs -- child elements )

CSS Values Description Default
align-self see values for align-items Override container align-items property -
order [number] Control the order of appearance Source order
(more later)

Important things to keep in mind

  • Most of Flexbox work is done on the Flex Container

  • A Flex Item can be a Flex Container to its own Flex Items (nested children)

  • float, clear, and vertical-align have no effect on Flex Items

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment