Flexbox Visual Cheat Sheet Demonstrates everything about CSS Flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items).

Flex Container Properties

display
Enables flex for all children.
flex-direction
Establishes the main axis.
flex-wrap
Wraps items if they can't all be made to fit on one line.
justify-content
Attempts to distribute extra space on the main axis.
align-items
Determines how items are laid out on the cross axis.
align-content
Only has an effect with more than one line of content.

Flex Item Properties

order
Allows you to explictly set the order you want each child to appear in.
flex-grow
Allows you to determine how each child is allowed to grow as a part of a whole.
flex-shrink
Allows an item to shrink if necessary. Only really useful with a set size or flex-basis.
flex-basis
Defines the size of an element before remaining space is distributed.
align-self
Sets alignment for individual item.

CSS


  .flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
  }

  .flex-item {
    order: 0;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
    align-self: auto;
  }
            

HTML


  <div class="flex-container">
    <div>1</div>
    <div class="flex-item">2</div>
    <div>3</div>
  </div>
            

Preview

1
2
3
4
5
6
7
8
9
10