CSS Flexbox Interactive Cheatsheet

Created by CyanHall.com on 11/13/2020 , Last updated: 04/30/2021.
👉   Star me if it’s helpful.

Flex Container

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

Flex Item: Clear

• order: - 0 +
• align-self: flex-start center flex-end baseline stretch (override Flex Container's align-items)
• flex-basis: 60px 20% auto
  When container's flex-direction is row: override A's width.
  When container's flex-direction is column: override A's height.

• flex-grow: A: 0, B: 0 A: 1, B: 1 A: 1, B: 2 (Define how to fill extra space)
• flex-shrink: A: 0, B: 0 A: 1, B: 1 A: 1, B: 3 (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;
}
  

Modern JavaScript 👈

JavaScript Date & Time 👈
(Moment.js/Day.js/date-fns)

CSS Image Processing 👈

Git

Homebrew

Shell

FFmpeg

Ansible

TypeScript

Deno

Vue.js 2

Prisma

Python 3

SQLAlchemy

Golang

Docker

SQL(MySQL, PostgreSQL)

Redis

Next.js

CSS Selector

CSS Flexbox

Swift

OpenGL

VS Code: Close Git Unmodified 👈

Interactive Dot Product Visualization in 3D

Useful Links 👈