Flexbox30
Start Course

Flexbox30

Learn Flexbox with 30 Code Tidbits ✨

Flexbox Core Concepts

  • Introduction1

    Introduction

  • Flex Container & Flex Items2

    Flex Container & Flex Items

  • Immediate Child Only3

    Immediate Child Only

  • Flexbox Axes4

    Flexbox Axes

  • Flexbox Module5

    Flexbox Module

Parent Properties

  • Parent Properties6

    Parent Properties

  • display7

    display

  • block vs inline8

    block vs inline

  • flex-direction9

    flex-direction

  • flex-wrap10

    flex-wrap

  • flex-flow11

    flex-flow

  • justify-content [row]12

    justify-content [row]

  • justify-content [column]13

    justify-content [column]

  • space-around vs space-evenly14

    space-around vs space-evenly

  • align-items [row]15

    align-items [row]

  • baseline16

    baseline

  • align-items [column]17

    align-items [column]

  • align-content18

    align-content

  • flex27

    flex

Child Properties

  • Child Properties19

    Child Properties

  • order20

    order

  • flex-grow21

    flex-grow

  • flex-grow calculation22

    flex-grow calculation

  • flex-shrink23

    flex-shrink

  • flex-shrink calculation24

    flex-shrink calculation

  • flex-basis25

    flex-basis

  • flex-basis vs widths26

    flex-basis vs widths

  • align-self28

    align-self

Summary

  • Flexbox Properties29

    Flexbox Properties

  • Flexbox Cheatsheet30

    Flexbox Cheatsheet

  • Bonus: Flexbox with Auto Margins31

    Bonus: Flexbox with Auto Margins

More Courses

Top Tidbits