CSS Flexbox Cheat Sheet

Before the Flexbox Layout module, there were four layout modes:

  • Block, for sections in a webpage
  • Inline, for text
  • Table, for two-dimensional table data
  • Positioned, for explicit position of an element

The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.

flex-direction: row | row-reverse | column | column-reverseFlex Direction
flex-wrap: nowrap | wrap | wrap-reverseFlex Wrap
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenlyJustify Content
align-items: flex-start | flex-end | center | baseline | stretchAlign Items
align-content: flex-start | flex-end | center | space-between | space-around | stretchAlign Content
order: 0Order
flex-grow: 0Flex Grow
flex-shrink: 1Flex Shrink
flex-basis: 3px | autoFlex Basis
align-self: auto | flex-start | flex-end | center | baseline | stretchAlign Self

Leave a Reply

Your email address will not be published. Required fields are marked *