CSS · Lesson 3 of 4

Put your interests in a row

display: flex arranges the list items in a row. gap separates them, and flex-wrap lets them move to another line when space is short.

Your task

Change gap from 12px to 24px. Add flex-direction: column inside the rule to make a column, then remove it.

Each new lesson builds on your personal page. Your saved lesson draft opens when you return.

Choose an image from your computer

The image stays in your browser. Choose it before running; its filename replaces the example filename.

        CSS · style.cssul {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  list-style: none;
  padding: 0;
}
        Edit your project HTML
            HTML · index.html<main>
  <h1>Hello, I’m Sara</h1>
  <p>This is my first page.</p>
  <ul>
    <li>Reading</li>
    <li>Drawing</li>
    <li>Learning</li>
  </ul>
</main>
            
        
    

Your page

Checks use your current code. Try the page yourself too.

Can you switch between a row and a column? Bring these ideas together to style your page.

Next: Project: style your page

I need help

Keep the rules inside the ul braces. If there is no gap, check that display: flex is still present.

More explanation

Save the page to your computer

Download the HTML file

If the download does not start, copy the complete code below into a text file named index.html and save it as UTF-8.

Complete code to save

Your task

Your page

Your feedback