Back to Unit 6

Unit 6 Website Development - Tutorial 2

2.18 Use Flexbox to place items in a row or column

Use flex containers for simple one-dimensional layouts.

What You Are Adding

Flexbox arranges child elements inside a container. A row places items side by side, while a column stacks them vertically. It is useful for navigation bars, card rows and aligned groups of content.

CSS To Add To css/style.css

Add or adapt this CSS in the stylesheet you created in Tutorial 1. Keep the HTML structure from Tutorial 1 and use CSS to improve the presentation.

.card-row {
    display: flex;
    flex-direction: row;
}

.card-column {
    display: flex;
    flex-direction: column;
}

Expected Output

Websites

Build pages with HTML and CSS.

Games

Create interactive projects.

Apps

Plan simple app ideas.

Build It Yourself

  1. Open the same unit-6-website folder from Tutorial 1.
  2. Add or update the relevant HTML class names if this page uses classes.
  3. Add the CSS shown above to css/style.css.
  4. Save the stylesheet and refresh the website in the browser.
  5. Compare your page with the expected output preview.

Common Mistakes

Success Checklist