How to evenly line three p elements next to each other with flexbox

Question

I am making three boxes next to each other. Each box has a image + header + text. The first box contains a header with two words. When shrinking the browser the p content of box 2 and 3 are lined up higher than box 1.

The code which i used is:

<section id="boxes">
    <div class="container">
        <div class="box">
            <img src="https://www.w3.org/html/logo/downloads/HTML5_1Color_Black.png" alt="html5 logo">
            <h3>HTML 5 Website</h3>
            <p>Curabitur porttitor metus odio, fringilla bibendum sem faucibus quis. C</p>
        </div>
        <div class="box">
            <img src="https://www.w3.org/html/logo/downloads/HTML5_1Color_Black.png" alt="html5 logo">
            <h3>Webbie</h3>
            <p>Curabitur porttitor metus odio, fringilla bibendum sem faucibus quis. C</p>
        </div>
        <div class="box">
            <img src="https://www.w3.org/html/logo/downloads/HTML5_1Color_Black.png" alt="html5 logo">
            <h3>Informatie</h3>
            <p>Curabitur porttitor metus odio, fringilla bibendum sem faucibus quis. C</p>
        </div>
    </div>
</section>

and the CSS:

#boxes .container {
    display: flex;
    max-width: 900px;
}

.box {
    display: flex;
    flex-direction: column;
}


.box img {
    /*prevents image from being larger than it's container, but doesn't stretch it if it's smaller than the container*/
    /*if you had a 20x20px image, then it would not get stretched to match the container's width, but it would stay 20x20px. Whereas a 2000x2000px image would get scaled down to fit the container*/
    max-width: 100%;
}

jsfiddle: https://jsbin.com/gudomuyora/edit?html,css,output

How to line up the top of the p elements within the 3 boxes evenly.

Answer 1

You can use justify-content: space-between on .box to achieve this.

 #boxes .container { display: flex; max-width: 900px; } .box { display: flex; flex-direction: column; justify-content: space-between; } .box img { max-width: 100%; flex: 0 0 auto; } .box h3 { flex: 1 1 auto; } .box p { flex: 0 1 auto; } 

 <section id="boxes"> <div class="container"> <div class="box"> <img src="https://www.w3.org/html/logo/downloads/HTML5_1Color_Black.png" alt="html5 logo"> <h3>HTML 5 Website</h3> <p>Curabitur porttitor metus odio, fringilla bibendum sem faucibus quis. C</p> </div> <div class="box"> <img src="https://www.w3.org/html/logo/downloads/HTML5_1Color_Black.png" alt="html5 logo"> <h3>Webbie</h3> <p>Curabitur porttitor metus odio, fringilla bibendum sem faucibus quis. C</p> </div> <div class="box"> <img src="https://www.w3.org/html/logo/downloads/HTML5_1Color_Black.png" alt="html5 logo"> <h3>Informatie</h3> <p>Curabitur porttitor metus odio, fringilla bibendum sem faucibus quis. C</p> </div> </div> </section>