Flex Container properties

  • flex-direction
  • Item #1
    Item #2
    Item #3
    .container { flex-direction: row; }
  • align-items
  • Item #1
    Item #2
    Item #3
    .container { align-items: stretch; }
  • justify-content
  • Item #1
    Item #2
    Item #3
    .container { justify-content: flex-start; }
  • align-content
  • Item #1
    Item #2
    Item #3
    Item #4
    Item #5
    Item #6
    Item #7
    Item #8
    Item #9
    .container { align-content: stretch; }
  • flex-wrap
  • Item #1
    Item #2
    Item #3
    Item #4
    Item #5
    Item #6
    Item #7
    Item #8
    .container { flex-wrap: nowrap; }

    Flex Items properties

  • align-self
  • (for Item#2)
    Item #1
    Item #2
    Item #3
    .item2 { align-self: auto; }
  • flex-grow
  • Item #1
    Item #2
    Item #3
    .item1 { flex-grow: 0; }
  • flex-shrink
  • Item #1
    Item #2
    Item #3
    .item1 { flex-shrink: 1; }
  • order
  • Item #1
    Item #2
    Item #3
    .item1 { order: 0; }
  • flex-basis
  • Item #1
    Item #2
    Item #3
    .item1 { flex-basis: 33%; }

    Flex Playground

  • flex-direction
  • align-items
  • justify-content
  • align-content
  • flex-wrap
  • align-self
  • (for Item#2)
  • flex-grow
  • flex-shrink
  • order
  • Item #1
    Item #2
    Item #3
    Item #4
    Item #5
    Item #6
    Item #7
    Item #8
    .container { flex-direction: row; } .item { }