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

Posted by Aris Constantinou
Aris Constantinou
2,687 Points

Container Flexbox items

Hi,

I created a small website using 2 flex containers and the resulit is ok.My question is, can i do the same result by using only 1 flexbox container on the container class? I ve been trying to do it but it wont work and i don't want to have 2 flexbox containers.

<!DOCTYPE html>
<html>
 <head>
     <link rel="stylesheet" href="css/framework.css">
     <link href='https://fonts.googleapis.com/css?family=Electrolize' rel='stylesheet' type='text/css'>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
     <script src="js/custom.js"></script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">      
  <title>NK Electrical LTD</title>
 </head>
 <body>
     <div class="container">
         <section class="boxes">
        <ul class="gallery">
          <li>
            <a href="img/electrical.png">
              <img src="img/electrical.png" alt="">
              <p>Electrical Installations</p>
            </a>
          </li>
          <li>
            <a href="img/lighting.png">
              <img src="img/lighting.png" alt="">
              <p>Lighting Decorations</p>
            </a>
          </li>
          <li>
            <a href="img/homeappliances1.png">
              <img src="img/homeappliances1.png" alt="">
              <p>Electrical Appliances</p>
            </a>
          </li>
          <li>
            <a href="img/homeappliances2.png">
              <img src="img/homeappliances2.png" alt="">
              <p>Kitchen Appliances</p>
            </a>
          </li>
        </ul>
      </section>
        <section class="latest">
            <h1>Our latest products</h1>
         <ul class="galleryproducts">
          <li>
            <a href="img/1.jpg">
              <img src="img/1.jpg" alt="">
            </a>
          </li>
          <li>
            <a href="img/2.jpg">
              <img src="img/2.jpg" alt="">
            </a>
          </li>
          <li>
            <a href="img/3.jpg">
              <img src="img/3.jpg" alt="">
            </a>
          </li>
          <li>
            <a href="img/4.jpg">
              <img src="img/4.jpg" alt="">
            </a>
          </li>
        </ul>
         </section>
     </div>
 </body>
</html>

*{
    box-sizing: border-box;
    margin:0;
    padding: 0;
}
ul{padding:0;margin:0;list-style: none;}
body{font-family: 'Electrolize', sans-serif;}
.container{
    max-width: 940px;
    margin: 0 auto;
    padding: 0 5%;
}
.gallery{display: flex;}
.gallery li{width:200px;background-color: #1c1c1c;
  color: #bdc3c7;margin:0% 0.5% 0% 0.5%;}
.gallery img{width:100%;height:auto;}
.gallery p{margin: 0;
  padding: 6%;
  font-size: 1.25em;
  background-color: #483636;
  color: #bdc3c7;
  text-align:center;}
.galleryproducts{display: flex;}
.galleryproducts li{width:200px;margin:2%;}
.galleryproducts img{width:100%;height: auto;border:3px solid white;}
.latest{margin-top:1%;background-color:#1c1c1c;}
.latest h1{color: white;font-size:1.5em;font-weight: 300;border-bottom: 3px solid white;margin-bottom: 5%;padding:2%;}
a{text-decoration: none;}

2 Answers

Steven Parker
Steven Parker
231,886 Points
Steven Parker
Steven Parker
231,886 Points

Your current arrangement looks like a perfectly good application of flexbox. In both cases you're doing things with lists that flexbox is well suited for.

What's the downside of having 2 flexbox containers? I can't imagine why you would want to avoid using it more than once if you will be using it at all.

Aris Constantinou
Aris Constantinou
2,687 Points

I got your point, but i came to an issue with flexbox. I want to have a h1 within .primary but flexbox inserts it in it, but i want the h1 to be on top of the images(not inside the flexbox)

<!DOCTYPE html>
<html>
 <head>
     <link rel="stylesheet" href="css/framework.css">
     <link href='https://fonts.googleapis.com/css?family=Electrolize' rel='stylesheet' type='text/css'>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
     <script src="js/custom.js"></script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">      
  <title>NK Electrical LTD</title>
 </head>
 <body>
     <div class="container">

     <ul class="primary">
         <h1>Our latest products</h1>
  <li class="flex-item"><img src="img/1.jpg"></li>
  <li class="flex-item"><img src="img/2.jpg"></li>
  <li class="flex-item"><img src="img/3.jpg"></li>
  <li class="flex-item"><img src="img/4.jpg"></li>

    </ul>
     <ul class="secondary">

  <li class="flex-item1"><img src="img/electrical.png"></li>
  <li class="flex-item1"><img src="img/emergency.png"></li>
  <li class="flex-item1"><img src="img/homeappliances1.png"></li>
  <li class="flex-item1"><img src="img/homeappliances2.png"></li>

    </ul>
         </div>
 </body>
</html>

Framework.css

*{
    box-sizing: border-box;
    margin:0;
    padding: 0;
}
body{font-family: 'Electrolize', sans-serif;}
ul{list-style: none;padding: 0;margin: 0;}
.container{display: flex;flex-direction: column;}
.primary{display: flex;flex-wrap: wrap;order:2;justify-content: center;background-color:#1c1c1c;margin:0% 25%;padding:1%;}
.secondary{display: flex; flex-wrap: wrap;order:1;justify-content: center;}
.flex-item {
  background-color: black;
  padding: 5px;
  width: 200px;
  height: 150px;
  margin-top: 10px;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}
.flex-item1{
  background-color: tomato;
  padding: 5px;
  width: 200px;
  height: 150px;
  margin-top: 10px;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}

h1{flex:1;color:white;font-size:1.5em;font-weight: 300;border-bottom: 3px solid white;margin-bottom: 5%;padding:2%;margin-top:0;}
img{width:100px; height:auto;}

Can you help me with this issue?

Steven Parker
Steven Parker
231,886 Points
Steven Parker
Steven Parker
231,886 Points

Try adding this to your h1: min-width: 100%;

But I'm not sure it's appropriate to have anything directly inside a ul other than li's.