Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Flexbox Layout Understanding Flexbox Flex Container Challenge

The first step to using flexbox is creating a flex container. Target .main-nav and make it a flex container.

style.css
<!DOCTYPE html>
<html>
  <head>
    <title>Flexbox Layout</title>
    <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="page.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <header>
      <div class="conatiner">
      <ul class="main-nav">
        <li class="name"><a href="#">My Site</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
      </div>
    </header>
  </body>
</html>

2 Answers

Dane Parchment
MOD
Dane Parchment
Treehouse Moderator 11,020 Points

In your css you need to select the .main-nav element and make it display flex.

.main-nav {
    display: flex;
}

I recommend going back and watching the CSS Basics course if you do not remember how to style html elements. Otherwise rewatch the video on flex box if you do know CSS and just forgot the syntax for the flex display.

Select the class .column and use the flex item property and value that will expand the columns to fill the space of the row.

Dane Parchment
Dane Parchment
Treehouse Moderator 11,020 Points

This should be it's own new question, but I'll answer it regardless:

What you need to do is select the column class the css class selector:

.column {
}

And then we need to make sure that all of the columns grow to fit within the width of the main element we do this with the flex-grow attribute. The basically tells the flex container how much of the remaining space should go to that element. By giving it a value of 1 we are telling it that it should give that item all of the remaining space.

.column {
   flex-grow: 1;
}

It's a little confusing to wrap your brain around, I recommend reading the documentation on this: Flex Grow Documentation. I also recommend that you go back and watch the videos again. Don't just watch them and move on, to get good at programming you need to practice what you learn, so when a video goes over a new topic, play around with it in workspaces, until you understand what it does. Quizzes and coding exercises are there to test to your understanding!

Have fun programming, and if you need any more help feel free to ask more (and new) questions.