YoVDO

Understanding Flexbox Alignment - Main and Cross Axis Explained

Offered By: Kevin Powell via YouTube

Tags

Computer Science Courses Web Development Courses Flexbox Courses

Course Description

Overview

Save Big on Coursera Plus. 7,000+ courses at $160 off. Limited Time Only!
Dive into a 14-minute video tutorial that demystifies flexbox alignment in CSS. Learn the key differences between justify-content and align-items, and discover why justify-self isn't available in flexbox. Explore practical tricks for remembering these properties and gain a deeper understanding of their functionality. Use browser developer tools to experiment with various flexbox options, understand the concepts of main and cross-axis, and learn how flex-direction affects alignment. Discover the relationship between align-content and flex-wrap, and find out how to use margins as a workaround for justify-self. Perfect for web developers looking to enhance their CSS layout skills and create more flexible, responsive designs.

Syllabus

- Introduction
- Using your devtools to play with different options
- The main and cross-axis
- The main axis has to focus on groups of content and the cross axis on individual items
- Changing the flex-direction
- align-content and flex-wrap
- You can use margins when you want justify-self


Taught by

Kevin Powell

Related Courses

Software as a Service
University of California, Berkeley via Coursera
Intro to Computer Science
University of Virginia via Udacity
Web Development
Udacity
Software Engineering for SaaS
University of California, Berkeley via Coursera
CS50's Introduction to Computer Science
Harvard University via edX