CSS CSS Flexbox Layout Flexbox Properties Distributing Space Inside a Flex Container

Aakash Srivastav
seal-mask
.a{fill-rule:evenodd;}techdegree
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,618 Points

justify-content

There are three divs and I want to center them horizontally . This is my HTML code-

<section>
<div class="container">
            <div class="col">
                <!-- logo -->
                <img src="https://s3.amazonaws.com/codecademy-content/projects/broadway/design.svg" width="40px" height="40px">
                <h2 class="tag-line">DESIGN</h2>
                <p>Make your projects look great and interact beautifully.</p>
                <a href="#" class="btn-default">Learn More</a>
            </div>
            <!-- <hr /> -->
            <div class="col">
                <img src="https://s3.amazonaws.com/codecademy-content/projects/broadway/develop.svg" width="40px" height="40px">  
                <h2 class="tag-line">DEVELOP</h2>
                <p>Use modern tools to turn your design into a web site</p>
                <a href="#" class="btn-default">Learn More</a>
            </div>
            <!-- <hr /> -->
            <div class="col">
                <img src="https://s3.amazonaws.com/codecademy-content/projects/broadway/deploy.svg" width="40px" height="40px">
                <h2 class="tag-line">DEPLOY</h2>
                <p>Use modern tools to turn your design into a web site</p>
                <a href="#" class="btn-default">Learn More</a>
            </div>

        </div>
</section>

Now I have two code snippets- 1.

section .container{
                display: flex;
                text-align: center;
        height: 340px;
        justify-content: center;
    }


    .col{
        width: 190px;
        margin: auto .5em;
    }

2.

section .container{
               display:flex;
               text-align: center;
        height: 340px;
        width: 80%;
        margin: 0 auto;
               justify-content: center;
    }


    .col{
        width: 190px;
        margin: auto .5em;
    }

I have done a very little change in second code snippet. I just gave and width to the container and center it. Obviously , I got the same result in both cases . Now my question is which is best choice? first or second? Actually I faced a lot of such situation where I have a choice for centering a container. So today i decided to ask in the TREEHOUSE forum. Thanks.

2 Answers

Steven Parker
Steven Parker
205,566 Points

These are clearly different, the one with the margin and size constraint has a visible gap on the left side.

Also, I see one of the properties is "justify-content", but that has no effect on normal elements. That property only works in a flex container ("display: flex");

If you were to make the container use flex, then those would look the same which means the margin and width settings are unnecessary.

Aakash Srivastav
seal-mask
.a{fill-rule:evenodd;}techdegree
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,618 Points

Sorry , Now I have updated my code. I acutally forgot to mention "display: flex" . I got my answer as you said "those would look the same which means the margin and width settings are unnecessary." Thanks :)