CSS Flexbox - Mastering the Basics

Explore the core flex container properties, including display, flex direction, wrap, flow, justify content, align items, and align content, to master layout in CSS flexbox.

Learn to create a flex container by setting display to flex, which lays out items left to right; compare with inline flex to see wrapping behavior.

Explore how flex direction defines the main axis and controls item placement in a flex container, using row, row-reverse, column, and column-reverse to stack or order items.

Explore how flex wrap controls wrapping of flex items in a container, including no wrap, wrap, and wrap reverse, and how column height enables vertical wrapping into columns.

Explore the flex flow shorthand that combines flex-direction and flex-wrap, experimenting with row, row-reverse, wrap, and wrap-reverse to control item alignment and wrapping in a container.

Master how justify-content aligns flex items along the main axis and distributes extra space with flex-start, flex-end, center, space-between, space-around, and space-evenly; axis direction changes with flex-direction.

Discover how align-items controls cross-axis alignment in a flex container, with defaults to stretch and options like flex-start, flex-end, center, and baseline, plus how to center the text baselines.

Master how the align-content property manages multi-line flex containers along the cross axis, using values like flex-start, center, space-between, space-around, and stretch (default) after enabling wrap.

Explore the flex item properties, including order, flex grow, flex shrink, flex basis, and the flex shorthand. Learn how align-self controls alignment of individual items.

Explore how CSS flexbox order controls flex items in a container. Default is 0; higher values push items to the end, while equal orders preserve source order.

Learn how flex grow controls how much space a flex item takes in its container relative to other items, with default 0 and 1 to fill remaining space.

The flex shrink property defaults to one and causes items to shrink. Shrink is relative to other items; you can set zero or give item 2 a factor of four.

Learn how flex-basis sets the initial size of a flex item before space distribution, with values like auto, 200px, and percentages, and how flex-grow and flex-shrink modify that size.

Master the flex property as a shorthand for flex grow, flex shrink, and flex basis; learn one, two, or three value syntax and experiment to understand how flex items respond.

Use align-self to override a flex container's align-items for individual items, choosing values like flex-start, flex-end, center, or stretch, with auto inheriting the container’s align-items.

Explore practical real-world use cases of CSS flexbox, from building a responsive nav bar to centering items, handling unequal column heights, and pursuing the holy grail layout.

Create a responsive navbar with flexbox by turning the ul into a flex container, spacing items with justify-content or flex: auto, and stacking them with media query at 400 pixels.

Center an item inside a container with flexbox by setting display:flex on the container and using justify-content:center and align-items:center to achieve perfect centering.

Explore how to use flexbox to place items side by side with unknown heights, achieve equal column heights, and push card footers to the bottom with flexible card bodies.

Build the holy grail layout with header, footer, and three columns using flexbox; configure main, side navigation, article, and aside with flex properties and a responsive media query.