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.

General Discussion Responsive Layout

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

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

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

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

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;
}