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

General Discussion Responsive Layout

Brendon Brooks
Brendon Brooks
8,802 Points
Posted by Brendon Brooks
Brendon Brooks
8,802 Points

Flex Box Quesition

I'm not sure why the flexbox isnt displaying. Please view below: 

<!DOCTYPE HTML>
<title>Brendon M Brooks</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
<body>
    <div class="wrap">
        <header class="main-header">
                <div class="container">
                    <h1 class="name"><a href="#">Brendon M Brooks</a></h1>
                            <ul class="main-nav">
                                <li><a href="#">Home</a></li>
                                <li><a href="#">Portfolio</a></li>
                                <li><a href="#">Contact</a></li>
                            </ul>
                <div>   
        </header>


            <div class="intro">
            <img class="intro-img" src="IMG/face.png"
                        alt="face pic" align="right"/>
                <p>Hi! I"m a front-end developer who loves responsive web design and css. I recently finished learning front-end web development at Treehouse and am excited for whatever the future holds.</p>
            </div> 



            <div id="flex-container">
                <div id="box1"> 
                <h3>Marketing Page</h3>
                <img src="IMG/portfolio-1.png"
                        alt="portfolio-1"/>
                <p>This project shows the front page of a marketing website meant for a specific business I'm interested in.</p>
                </div>



                <div id="box2">
                <img src="IMG/portfolio-2.png"
                        alt="portfolio-2"/>
                <h3>Search Page</h3>        
                <p>This project shows the front page of a marketing website meant for a specific database to find information that the user is trying to look up.</p>



                <div id="box3">
                <img src="IMG/portfolio-3.png"
                        alt="portfolio-3"/>
                <h3>Travel App</h3>     
                <p>This project compares travel times based on different transportation methods and tells you the best one.</p>
                </div>


                <div id="box4">
                <img src="IMG/portfolio-4.png"
                        alt="portfolio-4"/> 
                <h3>Map of Favorite Spots</h3>
                <p>This project uses mapping apis to plot points for my favorite spots in the city for a do-it-yourself walking tour.</p>
                </div>


                <div id="box5">
                <img src="IMG/portfolio-5.png"
                        alt="portfolio-5"/>
                <h3>Photo Gallery</h3>
                <p>This project shows pictures froma recent trip to the viewer and allows them to easily navigate through photos</p>
                </div>


                <div id="box6">
                <img src="IMG/portfolio-6.png"
                        alt="portfolio-6"/> 
                <h3>Calculator</h3>
                <p>Someone can enter in the numbers they want, and press the big blue button and get the result.</p>
                </div>
            </div> 


            <div class="contact">
            <h3>Contact</h3>
                <p>If you're interested in chatting or want more information about what I've been wokring on, I'd be okay with you talking to me</p>
                <ul style="list-style-type:none">   
                    <li> Phone: 555-555-5555</li>
                    <li> Email: 555-555-5555</li>
                </ul>
            </div>







        <footer class="main-footer">
         <h3 class="footer-name">Brendon M Brooks</h3>
            <ul class="footer-nav">
                                <li><a href="#">Home</a></li>
                                <li><a href="#">Portfolio</a></li>
                                <li><a href="#">Contact</a></li>
                                </ul>

        </div>


        </footer>

    </div>  

</body>

* {
    box-sizing: border-box;

}



body {
    line-height: 1.6;
    color: #000;

}    

p:last-child {
    margin-bottom: 0;

}


a {
    color: #000;
    text-decoration: none;
}



h1 {
    margin-top: 0px;

}

img {
    width: 25%;


}



/*********************

/* -----Navigation ---- */
.name {
    margin: 0;
    background-color: white;
}

.main-nav {
    background-color: white;


}


.main-nav ul {
    background-color: grey;
    text-align: right;
}

.main-nav ul li {
    display: inline;

}

.name a, 
.main-nav a {
    padding-top: 10px 15px;
    display: block;

}


/* -----Layout Containers ---- */

.container {
    padding-left: 1em;
    padding-right: 1em;
}



.main-header {
    text-align: center;
    padding-right: 1.5em;
    background: gray;
    margin-bottom: 30px;
}

.intro {
    width: 70% ;
    margin: 0 auto;
    background-color: #FBDCA6 ;
    padding-bottom: 100px;
    text-align: left
    font-size: 1.245em;


}

.portfolio {
    text-align: center;
    width: 70% ;
    margin: 0 auto;
  /*  background-color: #909650; */
    padding-top: -75em;

}


.portfolio img {
    width: 25%;



}

.contact {
    background-color: orange;
    width: 70%;
    margin: 0 auto;
    text-align: center;
}
/* -----Footer ---- */

.main-footer {
    background-color: grey;
    padding: 2em 0;


}

.footer-name {
    text-align: left;

}
.main-footer ul {
    background-color: grey;
    text-align: right;
}

.main-footer ul li {
    display: inline;

}


/* -----Media Containers ---- */

@media (min-width: 769px) {

    .wrap {
        min-height: calc(100vh - 89px);

    }


    .container {
    width: 70% ;
    max-width: 1000px;
    margin: 0 auto;

}

    .name,
    .main-nav li {
        display: inline-block;
    }

    .name {
        width: 300px;
        margin-right: 180px 0;
          }

    .portfolio {
         width: 70% ;
        max-width: 1000px;
         margin: 0 auto;

}

}


/*******Flex Box**********/
#box-wrapper-inner {
    display: -webkit-box;
    display: -moz-box;
    display: box;

    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    box-orient: horizontal;

    -webkit-box-pack: start;
    -moz-box-pack: start;
    box-pack: start;

    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    box-direction: normal;

    -webkit-box-align: stretch;
    -moz-box-align: stretch;
    box-align: stretch;
}

#box1 {
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    box-ordinal-group: 1;

    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    box-flex: 0;
}

#box2 {
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    box-ordinal-group: 1;

    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    box-flex: 0;
}

#box3 {
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    box-ordinal-group: 1;

    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    box-flex: 0;
}

#box4 {
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    box-ordinal-group: 1;

    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    box-flex: 0;
}

#box5 {
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    box-ordinal-group: 1;

    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    box-flex: 0;
}

#box6 {
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    box-ordinal-group: 1;

    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    box-flex: 0;
}

4 Answers

Jaime Rios
PLUS
Jaime Rios
Courses Plus Student 21,100 Points
Jaime Rios
Jaime Rios
Courses Plus Student 21,100 Points

In the parent container you are giving a ID instead of a CLASS. I know this can be frustrating some times, but keep in mind that it is part of the process.

Try writing 

<div class = "flex container">

Instead of 

<div id = "flex-container" >

Here is another source, btw

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Brendon Brooks
Brendon Brooks
8,802 Points
Brendon Brooks
Brendon Brooks
8,802 Points

Thanks for the suggestion, I'll key pounding keys (and possibly head).

Brendon Brooks
Brendon Brooks
8,802 Points
Brendon Brooks
Brendon Brooks
8,802 Points

No it did not. I've chosen to just wipe the CSS and start from scratch again. I'll post the results here later today.

Brendon Brooks
Brendon Brooks
8,802 Points
Brendon Brooks
Brendon Brooks
8,802 Points

Still no luck. The boxes remain in a vertical order. I have the HTML/CSS as follows: 

<!DOCTYPE HTML>
<title>Brendon M Brooks</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"
      >
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
<body>
    <div class="wrap">
        <header class="main-header">
                <div class="container">
                    <h1 class="name"><a href="#">Brendon M Brooks</a></h1>
                            <ul class="main-nav">
                                <li><a href="#">Home</a></li>
                                <li><a href="#">Portfolio</a></li>
                                <li><a href="#">Contact</a></li>
                            </ul>
                </div>  
        </header>


            <div class="intro">
            <img class="intro-img" src="IMG/face.png"
                        alt="face pic" align="right"/>
                <p>Hi! I"m a front-end developer who loves responsive web design, cheese and css. I recently finished learning front-end web development at Treehouse and am excited for whatever the future holds.</p>
            </div> 

            <div class="flex-container"> 
                <div id="box1"> 
                    <h3>Marketing Page</h3>
                         <img src="IMG/portfolio-1.png"
                            alt="portfolio-1"/>
                    <p>This project shows the front page of a marketing website meant for a specific business I'm interested in.</p>
                </div>

                <div id="box2">
                         <img src="IMG/portfolio-2.png"
                            alt="portfolio-2"/>
                    <h3>Search Page</h3>        
                    <p>This project shows the front page of a marketing website meant for a specific database to find information that the user is trying to look up.</p>

                <div id="box3">
                            <img src="IMG/portfolio-3.png"
                                    alt="portfolio-3"/>
                     <h3>Travel App</h3>     
                    <p>This project compares travel times based on different transportation methods and tells you the best one.</p>
                </div>


                <div id="box4">
                            <img src="IMG/portfolio-4.png"
                    alt="portfolio-4"/> 
                     <h3>Map of Favorite Spots</h3>
                      <p>This project uses mapping apis to plot points for my favorite spots in the city for a do-it-yourself walking tour.</p>
                </div>


                <div id="box5">
                            <img src="IMG/portfolio-5.png"
                            alt="portfolio-5"/>
                    <h3>Photo Gallery</h3>
                     <p>This project shows pictures froma recent trip to the viewer and allows them to easily navigate through photos</p>
                 </div>


                <div id="box6">
                            <img src="IMG/portfolio-6.png"
                            alt="portfolio-6"/> 
                    <h3>Calculator</h3>
                    <p>Someone can enter in the numbers they want, and press the big blue button and get the result.</p>
                </div>





                </div>











            </div>  




            <div class="contact">
            <h3>Contact</h3>
                <p>If you're interested in chatting or want more information about what I've been working on.</p>
                <ul style="list-style-type:none">   
                    <li> Phone: 555-555-5555</li>
                    <li> Email: 555-555-5555</li>
                </ul>
            </div>







        <footer class="footer">
         <h3 class="footer-name">Brendon M Brooks</h3>
            <ul class="footer-nav">
                                <li><a href="#">Home</a></li>
                                <li><a href="#">Portfolio</a></li>
                                <li><a href="#">Contact</a></li>
                                </ul>

        </footer>

    </div>  

</body>

* {
    box-sizing: border-box;
}


/***Main Layouts***/

.wrap {


}

.header{

}





/***Navigation*****/
.name{}

.main-nav{
    display: inline;
    padding: 2em;
   } 


.main-nav li  {

    float: right;


}
.main-nav li a {
    display: inline;
    padding: 8px;
}


/******introduction*****/

.intro {
    text-align: left;
    margin: 3em;
    padding: 10em;

}

.intro img {
     display: -webkit-flex; /* Safari */
    -webkit-align-items: center; /* Safari 7.0+ */
    display: flex;
    align-items: center;;
}


/*****************FleX Box*************/
.flex-container {
    direction: ltr;
    margin: 2em;
    padding: 4em;
    display: -webkit-flex;
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-content: flex-start;
    width: auto;
    height: auto;

}


.flex-container img{
    width: 25%;
}


.box1 {
    -webkit-order: -1;
    order: -1;
    margin: auto;
}
.box2 {
    -webkit-order: -2;
    order: -2;
    margin: auto;
}
.box3 {
    -webkit-order: -3;
    order: -3;
    margin: auto;
}
.box4 {
    -webkit-order: -4;
    order: -4;
    margin: auto;
}
.box5 {
    -webkit-order: -5;
    order: -5;
    margin: auto;
}
.box6 {
    -webkit-order: -6;
    order: -6;
    margin: auto;
}

/**********Contact*****************/
.contact {
    text-align: center;
    padding: 2em;
    margin: 2em;
}


/*******Footer**************/

.footer ul li  {
    float: right;


}
.footer-nav li a {
    display: inline;
    padding: 8px;
}