Flexbox fundamentals

Flexbox fundamentals

Flexbox is ideal for rows or columns of items. The main axis follows flex-direction; justify-content distributes items on the main axis and align-items on the cross axis. Use gap for consistent spacing and allow wrapping when appropriate.

Try it yourself

Change the example, run it, and explain the result in your own words. Then create one variation of your own.

Key idea

Use the example as a starting point, not something to memorize. Practise, inspect the result and make small improvements.