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 Joshua Gabriel
Joshua Gabriel
6,790 Points

Flexbox Container & Flex Item: What causes flow on content to break?

I have a project issue with formatting flexbox. I am not sure what I am doing wrong. I a have footer with a flex-container and 3 flex flex-items.

<footer class="footer">
   <div class="flex-container">
      <div class="flex-item">
         <h4>ON-SITE CONTRACTORS LOGO</h4>
         <p>Friendly | Dependable | Efficient</p>
         <p> On-Site Contractors is a family owned New Jersey demolition company. Since
               2013 we’ve provided the very best in structure demolition, 
               land clearing, tree removal and excavation,. Whether it’s residential or 
               commercial On-Site Contractors is licensed, insured and equipped
               to tackle any job, big or small. Each crew has the knowledge to accomplish 
               whatever job you may need on your site.</p>
         <span>Follow Us: </span>
         <a href="https://www.facebook.com/onsitecontractorsnj/modal=admin_todo_tour"><i class="fab fa-facebook-f"></i></a>
         <a href="https://www.instagram.com/on_site_contractors/"><i class="fab fa-instagram"></i></a>
         <a href="#"><i class="fab fa-linkedin-in"></i></a>
         <a href="#"><i class="fab fa-youtube"></i></a>
      </div>
      <!-- Item 1 --> 
      <div class="flex-item">
         <h4>QUICK LINKS</h4>
             <ul>
                <li><i class="fas fa-angle-double-right"></i><a href="#">Careers</a></li>
                <li><i class="fas fa-angle-double-right"></i><a href="#">Services</a></li>
                <li><i class="fas fa-angle-double-right"></i><a href="#">Projects</a></li>
                <li><i class="fas fa-angle-double-right"></i><a href="#">Get a Quote</a></li>
             </ul>
         </div>
         <!-- Item 2 -->   
      <div class="flex-item">
         <h4>CONTACT US</h4>
         <ul>
            <li><i class="fas fa-map-marker-alt"></i><a href="https://goo.gl/maps/MEtnom1kz2B2"><b>500 North Avenue East, Westfield, NJ 07090</b></a></li>
            <li><i class="fas fa-envelope"></i><a href="mailto:onsitecontractorsnj@yahoo.com">onsitecontractorsnj@yahoo.com</a></li>
            <li><i class="fas fa-mobile-alt"></i><a href="tel:908-937-0169">(908)-937-0169</a></li>
            <li><i class="fas fa-clock"></i><a><b>Mon - Sat: 7am - 5pm</b> | <b>Sun: Closed</b></a></li>
         </ul>
      </div>
   <!-- Item 3 -->
   </div>
</footer>

.flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.flex-item {
    display: flex;
    flex: 1;
    justify-content: center;
    padding: 10px;
Brendan Whiting
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Brendan Whiting
Front End Web Development Techdegree Graduate 84,735 Points
Brendan Whiting
.a{fill-rule:evenodd;}techdegree seal-36
Brendan Whiting
Front End Web Development Techdegree Graduate 84,735 Points

Can you describe in more detail what you want it to do and what and what's happening right now that's wrong? Also, there's a footer class in your html, but we don't see the CSS for that, is that relevant?

2 Answers

Joshua Gabriel
Joshua Gabriel
6,790 Points
Joshua Gabriel
Joshua Gabriel
6,790 Points

I use the footer tag for general background style. The flex-item collapse when I use flex: 1;

h4 remains centered, the <p> tags shift like a wrap but the other two flex-items gets pushed right while the biggest container with the most content expands. I can see if I can add a screenshot to explain. I want to saying it could be the padding and margin with each <p> <ul> <li> tag that the flex-item doesn't have enough space.

Brendan Whiting
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Brendan Whiting
Front End Web Development Techdegree Graduate 84,735 Points
Brendan Whiting
.a{fill-rule:evenodd;}techdegree seal-36
Brendan Whiting
Front End Web Development Techdegree Graduate 84,735 Points

What I'm observing is that as I expand and contract the window size, flex items get bumped to the next line if there's no longer space for them. When the window is the widest, all the flex items are in one line, but some of the paragraphs are smushed into very narrow columns. Is this the problem we're trying to correct?

P.S. are you sure that flexbox is the right tool you want, or is it better to use a grid system?

Joshua Gabriel
Joshua Gabriel
6,790 Points
Joshua Gabriel
Joshua Gabriel
6,790 Points

Yes that is the issue I am trying to correct. I think the best solution would be grid.