Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Flexbox Layout Understanding Flexbox Flex Container Challenge

Posted by tayla Robeson
tayla Robeson
1,894 Points

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,077 Points
Dane Parchment
Dane Parchment
Treehouse Moderator 11,077 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.

tayla Robeson
tayla Robeson
1,894 Points
tayla Robeson
tayla Robeson
1,894 Points

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,077 Points
Dane Parchment
Dane Parchment
Treehouse Moderator 11,077 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.