CSS Flexbox Interactive Cheatsheet

CSS Flexbox Interactive Cheatsheet

May 15, 2020
Cheatsheets, Frontend, Web
★ Star me on GitHub

Interactive demo of flexbox. Buttons are clickable, container are resizable. Created by Cyanhall.

A
B
C
D

Flex Container:

  • display: flex, inline-flex
  • flex-direction:
  • justify-content: (The layout for flex direction)
  • align-items: (The layout for cross flex direction, block C is set align-items: baseline)
  • flex-wrap: (Adjust the bottom-right corner to resize the Demo)
  • flex-flow = flex-direction + flex-wrap, eg: flex-flow: row wrap.
  • align-content: (Only has an effect with more than one line of content)

Flex Item:

The CSS property of A:

  • order: 0
  • align-self: (override Flex Container’s align-items)
  • flex-basis:
    When container’s flex-direction is row: override A’s width.
    When container’s flex-direction is column: override A’s height.

The CSS property of A and B:

  • flex-grow: (Define how to fill extra space)
  • flex-shrink: (Initial width: 100px, height: 100px, define how to shrink inside oversize space)


Demo Source Codes:

<div class="cyanhall-container">
  <div class="cyanhall-item cyanhall-item-a">A</div>
  <div class="cyanhall-item cyanhall-item-b">B</div>
  <div class="cyanhall-item cyanhall-item-c">C</div>
  <div class="cyanhall-item">D</div>
</div>
.cyanhall-container {
  resize: both;
  overflow: auto;
  display: flex;
  border: 1px solid #ddd;
  border-radius: 3px;
  height: 100px;
  align-items: flex-start;
}
.cyanhall-item {
  margin: 2px;
  min-width: 40px;
  min-height: 40px;
  background-color: #4a8fe2;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cyanhall-item-c {
  align-items: baseline;
}