HTML & CSS - lesson 3 | HackIndia Skills

Key point

One main idea

Flexbox lays out the direct children of a flex container along a main axis and a cross axis. Set display: flex on the parent, then control how its children share space.

Use it for one-dimensional layout: a row of nav links, buttons in a card, a profile header, or cards that wrap. Use Grid later when you need rows and columns together.

Axes matter

The main axis is the direction items flow. With flex-direction: row, the main axis runs left to right in English pages. With column, it runs top to bottom.

justify-content works on the main axis. align-items works on the cross axis. Do not memorise recipes. First ask: what is my main axis?

Example

Navbar example

This keeps the HTML semantic. The nav means navigation. Flexbox only handles the visual layout.

The links stay in DOM order, so keyboard users move through them in the same order they see them.

<header class="site-header">
  <a class="brand" href="/">Campus Bazaar</a>

  <nav aria-label="Main navigation">
    <ul class="nav-list">
      <li><a href="#features">Features</a></li>
      <li><a href="#pricing">Pricing</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</header>

<style>
  .site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
  }

  .nav-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }
</style>

Your to-do

Build a flex row

Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.

Choose the parent whose direct children need arranging.
Add display: flex to that parent.
Pick the direction with flex-direction if row is not right.
Add gap for space between items instead of margins on every child.
Use justify-content for main-axis spacing.
Use align-items for cross-axis alignment.

0 of 6 done

Tip

Use gap first

gap is usually cleaner than adding margin-left or margin-right to every item. It works well when items wrap onto another line.

This is useful for hackathon pages with tag pills, nav links, sponsor logos, or action buttons.

Common mistake

Do not reorder content

Flexbox can change visual order, but that can confuse keyboard and screen reader users when the DOM order no longer matches the screen order.

Keep your HTML in the order people should read and tab through it. Use Flexbox for spacing and alignment, not to hide messy markup.

Example

Cards that wrap

Flex items can grow and shrink to use available space. This makes a simple card row adapt before you add media queries in a later lesson.

Here, each card tries to be around 16rem wide, can grow to fill space, and can shrink when needed.

<section class="card-row" aria-label="Project features">
  <article class="card">
    <h2>UPI payments</h2>
    <p>Record payment status for each order.</p>
  </article>
  <article class="card">
    <h2>Hostel delivery</h2>
    <p>Show pickup points inside campus.</p>
  </article>
  <article class="card">
    <h2>Seller dashboard</h2>
    <p>List items and track requests.</p>
  </article>
</section>

<style>
  .card-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  }

  .card {
    flex: 1 1 16rem;
    padding: 1rem;
    border: 1px solid #d0d0d0;
    border-radius: 0.75rem;
  }
</style>