Flexbox Fundamentals

A simplified guide to understanding flexbox behaviors, covering items, sizing, axes, and alignment properties through practical navigation and column examples.

Coursified Library ↗

source: Kevin Powell

Outline · 9 modules · quiz after each

01Introduction to FlexboxoptionalCourse focuses on realistic situations and fundamentals rather than memorizing every property2 min

02Flex Items and Default BehaviorDirect children of a flex container become flex items2 min

03Flex Shrink and Flex GrowFlex items default to a max-content size, trying to fit content on one line3 min

04Wrapping Flex ItemsFlex wrap allows items to move to new lines when space runs out4 min

05Mastering Flex Basis and Equal ColumnsColumns size based on their content by default, often resulting in unequal widths10 min

06Flex Direction and AxesMain axis is determined by flex-direction, switching between row and column3 min

07Main Axis Alignment (Justify Content)Justify content aligns items along the main axis5 min

08Cross Axis Alignment and Align SelfAlign items aligns items along the cross axis, defaulting to stretch4 min

09Conclusion and ResourcesoptionalA flexbox cheat sheet is available for quick reference1 min

clones

learner

New

no ratings yet

modules

Cloning copies the outline, quizzes and assessment into your account. The video stays on YouTube; attribution to Coursified Library stays on the course.

Details

Duration34 min

Assessment14 questions · pass 70%

Quiz questions66

LanguageEnglish

CertificateYes · verifiable

NewNo ratings yet