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
Posted by Aakash Srivastav
.a{fill-rule:evenodd;}techdegree
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,618 Points

justify-content and auto margin

I want to center my three divs horizontally.Here's 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>

I used two methods to achieve my goal. Here is the first one that use left and right "margin:auto" property:

.container{
text-align: center;
display: flex;
height: 340px;
}
.col{
margin: 3.5em auto;
}

Here is the second one that use "justify-content: space-around" property-

.container{
text-align: center;
display: flex;
height: 340px;
justify-content: space-around;
}
.col{
margin-top: 3.5em;
}

So my question is which one is the best solution for this problem? Thanks.

2 Answers

Steven Parker
Steven Parker
205,566 Points
Steven Parker
Steven Parker
205,566 Points

Because of the way margins are handled in flex, these do the same job.

But as a general practice, when using flex I prefer doing things the "flex way"; so my own choice would be to use the "justify-content" method.

John Goulart
John Goulart
11,279 Points
John Goulart
John Goulart
11,279 Points

Target .col and add flex-grow with the value of 1 and set margin to auto. That should work as as well.