Whats wrong with My Answer. I set .primary { order: 1; } and its not working

Question

style.css

/* Complete the challenge by writing CSS below */

.nav, 
.main {
 display: flex;
}

.nav {
  flex-wrap: wrap;
}

.nav li {
  flex-grow: 1;
}

.primary {
  order: 1;
}

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Flexbox</title>
    <link rel="stylesheet" href="page.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <ul class="nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Articles</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
    <div class="main">
        <div class="secondary col">
            <h2>Secondary</h2>
            <p>
                Maecenas volutpat nisi vitae purus gravida, ac pulvinar enim venenatis. Fusce ac pharetra ipsum. Suspendisse potenti. Etiam placerat rhoncus mi id ornare.
            </p>
        </div>
        <div class="primary col">
            <h2>Primary</h2>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent id mollis neque. Phasellus rutrum iaculis ante, id tincidunt tellus pulvinar vitae. Maecenas sodales mollis nisi sit amet congue. 
            </p>
            <p>
                Duis pharetra, sem in dictum posuere, justo orci vestibulum arcu, vitae lobortis ipsum nibh sed dolor. Vestibulum sodales pulvinar risus vel fermentum. Nunc sit amet eros eget orci euismod imperdiet. Phasellus scelerisque orci non ipsum vestibulum non eleifend.
            </p>
        </div>
        <div class="tertiary col">
            <h2>Tertiary</h2>
            <p>
                Donec id ultrices diam. Praesent efficitur vulputate eros ac aliquam. Ut et libero ultricies, mattis velit sit amet, suscipit sem. Aenean dictum pellentesque tincidunt. 
            </p>
        </div>
    </div>
</body>
</html>

Answer 1 · 2015-02-19T14:28:03Z

February 19, 2015 2:28pm

Hey bro... simple mistake.

The problem is with the value that you set in regard to what the challenge was asking you.

By default, all flex items(FI's) have a set value of zero and they are lined up in the order that they appear in the html doc. Your goal with changing the order is to rearrange them right? Ok ... so say you have 3 items like here.

<div class="primary"></div>
<div class="secondary"></div>
<div class="tertiary"></div>

And each one has a value of zero

0 -> 0 -> 0

So they will line up along the axis of the flex box in that order... the order that they lie within the html doc, because the numerical order goes from left to right by default(it's reversed if you have your flex-direction set to row-reverse). So that gives you the order of

primary -> secondary -> tertiary

Now, you need to put the 2nd one in the beginning of that order or in front of all the other elements.

You used the value of 1. If you line up the elements in numerical order lowest to highest, where would that put that element?

Now... what number would you need to use as the value to place it in the beginning of that numerical order?

Welcome to the Treehouse Community

Looking to learn something new?

Fiverr Dev

Fiverr Dev

Whats wrong with My Answer. I set .primary { order: 1; } and its not working

1 Answer

huckleberry

huckleberry