Mastery of Flexbox and Grid (2 in 1 course) - Easy Guide

Flexbox is a flexible box model for a one dimensional layout that operates in a single direction, distributing space, aligning content, and moving blocks to improve readability.

Explore how the display property affects direct child elements inside a flex/grid-enabled container, testing values such as inline, inline-block, table, grid, and flex on divs.

Explore how display values shape layout by examining the flex container and its direct flex items, compare flex to inline flex, and note nesting rules and grandchild limits.

Describe how flex-direction sets the main and cross axes in a flex container, defaulting to row and enabling row-reverse, column, and column-reverse layouts.

Explore flex-wrap in this hands-on guide, comparing no wrap, wrap, and wrap-reverse; learn how containers overflow or break into multiple lines while controlling item direction with flex-direction.

Access the course resources in the final notes video; a zip folder contains images, videos, and coding files used in lessons, with some videos offering downloadable resources.

Master flex-wrap in column layouts by contrasting no wrap, wrap, and wrap-reverse; adjust container height to show how items cannot be contained and drop to the next line.

Explains flex flow as the shorthand for flex direction and flex wrap, and shows how to apply direction and wrap settings together for responsive layouts.

Master the justify-content property in flexbox to control alignment along the main axis, distribute space, and position items with start, end, center, space-between, space-around, and space-evenly in rows and columns.

Learn how justify-content controls vertical alignment in a column flex container, exploring flex-start, flex-end, center, space-between, space-around, and space-evenly, including column reverse behavior and height requirements.

Learn how to use flexbox and the margin auto technique to separate flex items, using left, right, top, and bottom margins to create precise spacing and layout control.

Explore how the align-items property aligns flex items in a row, covering stretch, flex-start, flex-end, center, and baseline, with hands-on demonstrations on containers and cross-axis alignment.

Explore how align-items governs column flex layouts, from default stretch to flex-start, flex-end, center, and baseline, and learn how baseline behavior differs from other alignments.

Demonstrate how align-items in a flex row controls height behavior of flex items. Learn how a single child height can cascade to siblings when stretch remains the default.

Discover align-content for rows in a multi-line flex container, using flex wrap and wrap reverse to align lines with values like flex-start, center, space-between, space-around, and space-evenly.

Explore align-content in a column flex container, experimenting with flex-start, center, space-between, space-around, space-evenly, and stretch while using flex-wrap and controlled heights.

Explore how the gap property in flexbox creates space between items, using row gap and colon gap, with wrap-enabled layouts and two-value shorthand for both gaps.

Master the flexbox gap property to control row gap and column gap between items, using wrap to reveal gaps and understand how main axis orientation affects spacing.

Create a responsive two-column layout using flexbox by building a parent container with two child boxes, enabling flex wrap and equal widths, and adjusting at breakpoints for mobile.

Design a three-column flex row by assigning each item a one-third width, adjust padding for balance, and test responsiveness across mobile to laptop with flex wrap.

build a responsive flexbox row with four equal columns, each 25% wide, using wrap to manage overflow across widths.

Create a flexbox row with five equal columns and explore responsive behavior from wrap to no wrap. Apply last-of-type selectors and percentage widths to maintain equal sizing on different screens.

Learn to build a flexbox row project that creates separate rows by wrapping flex items, assign colors, and define responsive columns using a flex wrapper.

Create a flexbox row with varying widths using percentage-based classes, such as 20% and 80%, ensuring they sum to 100%. Adapt these classes for responsive layouts on mobile and tablet.

Learn to create space between flex items using justify-content: space-between in a flex wrapper, adjust item widths to maintain gaps, and use room gap for vertical spacing in responsive layouts.

Learn to build a flexbox row by applying space-between, adjusting widths with percentage values, and using gaps to create responsive, evenly spaced items.

Explore a flexbox row design with restricted width, using wrap and percentage widths to break onto new lines, while managing space with justify content and margins for responsive layouts.

Learn to build a responsive image gallery with flexbox by converting a project to flex box, adding images, adjusting padding, and using object-fit cover for consistent aspect ratios.

Learn to nest flex items, create parent and child flex containers, and implement responsive wrapping at breakpoints like 700px using wrap, 100% widths, and justify-content with space-between.

Master the art of nesting flex items to create responsive column layouts in flexbox by nesting columns inside parent flex containers, adjusting padding, and exploring multi-level flex nests.

Design a responsive flex layout with a fixed navigation bar, a background image, and nested flex items to build a five-item nav and a three-panel aside, using 20/60/20 width distribution.

Style the navigation with flexbox to align items in a row, wrap, and assign 12% widths; apply a royal blue background and white links for a responsive fixed navigation.

Master responsive flex layouts using media queries and tablet mode, adjust flex item widths to 100 percent, and enable flex wrapping to stack navigation on small screens.

Explore building a masonry layout with flexbox in three columns, using percentage heights and gaps to create a responsive mosaic with color variety and aligned content.

master the masonry layout with flexbox by building four equal columns, adjusting counts, and making the grid responsive with breakpoints and container rules.

Learn to build a masonry layout with gaps using flexbox, balancing item widths and gap percentages to prevent overflow and achieve a precise total width.

Learn to build a responsive image gallery with a flexbox masonry layout, creating a mosaic feel using multiple columns, varied image heights, and object-fit: cover to preserve aspect ratios.

Master how the flex items order property determines item sequencing in a flex container, with default zero, higher values last, and negative values placing items first; floats have no effect.

explain how order property arranges flex items in a column. positive values push items toward bottom, while negative values reverse order from bottom to top; equal orders preserve relative order.

Explore how the flex-grow property allows flex items to grow to fill space in a row. See how equal grow values produce equal sizes, while higher values shift space proportionally.

Learn how the flex-grow property makes flex items in a column fill the remaining space along the main axis, with size determined by each item's grow value.

Explore how flex-grow distributes remaining space among flex items in wrapped rows and columns, and see how container size and item settings affect how space is shared.

Understand how flex-grow distributes space proportionally among flex items in a container, using unitless ratios like 1, 2, and 3 to illustrate main-axis behavior.

Explore how flex-shrink controls how flex items shrink on the main axis, with a default of 1, how multiple items share leftover space, and how zero shrink prevents resizing.

Explains how flex items with pixel widths shrink as the viewport narrows, observing shrink order based on flex-shrink values and absolute lengths.

Master the flex-basis property to set the default size of flex items and control how remaining space is distributed along the main axis, using percentages, px, rem, and other units.

Explore the flex shorthand property and its relation to flex grow, shrink, and basis, including default values and practical examples for applying single-value shorthand to flex items.

Create equal-width columns with flex basis in a flex row. Explore applying flex items, enabling wrap for responsiveness, and using gaps and colors to visualize varying column counts.

Master flexbox layouts by varying flex-basis with percentage values using custom classes to create mixed and equal sizes, and manage overflow with no-wrap rules and attribute content selectors.

Discover how align-self overrides the container's align-items for individual flex items, using values like stretch, center, flex-end, and baseline to create per-item alignment.

Learn to center flex items in flexbox by applying align-items center, align-self center, and justify-content center to achieve vertical and horizontal centering.

Explore a web flex layout built with flex grow to create a two-column design featuring navigation on one side and header, article, aside, and footer on the other.

Turn a container into a grid with display: grid to build a two-dimensional layout of grid containers and items. Compare grid with inline-grid and use grid-template-columns and grid-template-rows, avoiding floats.