Skip to content

Instantly share code, notes, and snippets.

@sranso

sranso/flexbox.md

Last active August 29, 2015 14:21
Show Gist options
  • Save sranso/994af9e892dfc8eda2bf to your computer and use it in GitHub Desktop.
Save sranso/994af9e892dfc8eda2bf to your computer and use it in GitHub Desktop.
Download ZIP
Raw
flexbox.md

what is flexbox

  • The CSS Flexible Box Layout Model, or "flexbox"
  • one of the specifications in CSS3
  • defining aspect of the flex layout -- the ability to alter its items' width and/or height to best fill the available space on any display device
    • expands items to fill available free space, or shrinks them to prevent overflow
  • elements behave predictably when the page layout must accommodate different screen sizes and different display devices
  • considered (in some cases) an improvement over the block model in that it does not use floats, nor do the flex container's margins collapse with the margins of its contents
  • display order of the elements is independent of their order in the source code
    • intentionally only affects the visual rendering, leaving speech/navigation based on the source order
  • for example

vocab/using it

  • flex container -- parent element, contains items. defined using flex or inline-flex on display
    • flex -- makes the flex container a block-level element
    • inline-flex -- makes the flex container an atomic inline-level element
  • flex items -- each child of flex container is a flex item
    • flex: [flex-grow] [flex-shrink] [flex-basis]
    • more
  • flex lines -- flex items are positioned along flex lines
    • by default there is only one per flex container
    • you can change the direction of the flex line
    • by default they go the direction of text: left to right, top to bottom
    • you can change the flex-direction property to change the direction of the flex line
  • main axis and cross axis
    • flex lines follow the main axis
    • cross axis is perpendicular to main axis
    • everything in flexbox is relative to these axes
  • The names for the starting points, ending points, and directions of each axis are as follows:
    • Main Start
    • Main End
    • Main Direction (sometimes called the Flow Direction)
    • Cross Start
    • Cross End
    • Cross Direction

properties of flex container

  • flex-direction -- allows you to change axes of flex container
    • default val is row -- flex items laid in dir of writing-mode (l-r, t-b)
    • other values
      • row-reverse -- main start and main end are swapped
      • column -- main axis and cross axis are swapped
      • column-reverse -- same as col but rev
  • justify-continet -- adjusts positions of flex items on main axis
    • flex-start -- default
    • flex-end
    • center
    • space-between
    • space-around
  • align-items -- complementary to justify-content, adjusts the way flex items are positioned on cross axis
    • flex-start -- default
    • flex-end
    • center
    • baseline
    • stretch
  • flex-wrap -- can create flex containers w/ multiple flex lines
    • nowrap -- default
    • wrap
    • wrap-reverse
  • align-content -- modifies behavior of flex-wrap; similar to align-items but instead of aligning flex items it aligns flex lines
    • stretch -- default
    • flex-start
    • flex-end
    • center
    • space-between
    • space-around
  • flex-flow -- shorthand for flex-direction and flex-wrap

properties of flex items

  • order
  • margin
  • align-self
    • stretch (default)
    • flex-start
    • flex-end
    • center
    • baseline
  • flex -- specifies how a flex item will be prioritized when free space is distributed on main axis
    • [number]
      • e.g. if 3 flex items all have 1 as their flex then they will take up equal space. if one has a 2 val and the others have 1 then it will take up 2/4 of the free space, and the other two, 1/4
    • initial
    • auto
    • none -- inflexible
    • advanced flex -- flex: [flex-grow] [flex-shrink] [flex-basis]
  • visibility
    • collapse -- el will affect the cross size of the flex container but wont be displayed/consume any space on main axis; is it correctlly implemented by browsers, though?
    • hidden -- also under construction...

support

  • caniuse
  • polyfills? doesn't look like there's a good way to implement for all browsers. seems like you gotta hack a bit

warnings/notes

history

  • July 2009 Working Draft (display: box;)
  • March 2011 Working Draft (display: flexbox;)
  • November 2011 Working Draft (display: flexbox;)
  • March 2012 Working Draft (display: flexbox;)
  • June 2012 Working Draft (display: flex;)
  • September 2012 Candidate Recommendation (display: flex;)

good readings

grids

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