Create a div with links to social networks

Question

Everybody, good afternoon, everybody.

I would like a help to create a div with 3 images for social networks, but I would like them to be divided in equal parts, as well as in the image below:

So far my code HTML and CSS is like this:

<div class="footer-img">
    <div class="figure">
        <a href="#" target="_blank">
            <figure>
              <img src="instagram.png" alt="#" style="width: 25px;">
              <figcaption>LEGENDA</figcaption>
            </figure>
        </a>
    </div>

    <div class="figure">
        <a href="#" target="_blank">
            <figure>
              <img src="youtube.png" alt="#" style="width: 35px;">
              <figcaption>LEGENDA</figcaption>
            </figure>
        </a>
    </div>

    <div class="figure">
        <a href="#" target="_blank">
            <figure>
              <img src="facebook.png" alt="#">
              <figcaption>LEGENDA</figcaption>
            </figure>
        </a>
    </div>
</div>

<style type="text/css">
    .footer-img {
        background-color: #F09300;
        color: #FFF; 
        width: 100%;
    }

    .figure {
        display: inline-block; 
        width: 20%;
        vertical-align: middle;
    }

    .figure:hover {
        background-color: #f7c27b;
        cursor: pointer;
    }

    .figure a {
        text-decoration: none;
        color: #FFF !important;
    }

    .figure img {
        display: inline !important;
        width: 25px;
    }

    .figure figcaption {
        display: inline !important;
        vertical-align: super !important;
    }
</style>

Thank you.

Answer 1

Face you can replace the display:inline-block for flex, and divide the divs in equal sizes using the width with calc thus width: calc(100% / 3)

See how it looks in the model below.

.footer-img {
    background-color: #F09300;
    color: #FFF; 
    width: 100%;
    display: flex;
}

.figure {
    vertical-align: middle;
    width: calc(100% / 3);
}

.figure:hover {
    background-color: #f7c27b;
    cursor: pointer;
}

.figure a {
    text-decoration: none;
    color: #FFF !important;
}

.figure img {
    display: inline !important;
    width: 25px;
}

.figure figcaption {
    display: inline !important;
    vertical-align: super !important;
}

<div class="footer-img">
    <div class="figure">
        <a href="#" target="_blank">
            <figure>
                <img src="instagram.png" alt="#" style="width: 25px;">
                <figcaption>LEGENDA</figcaption>
            </figure>
        </a>
    </div>

    <div class="figure">
        <a href="#" target="_blank">
            <figure>
                <img src="youtube.png" alt="#" style="width: 35px;">
                <figcaption>LEGENDA</figcaption>
            </figure>
        </a>
    </div>

    <div class="figure">
        <a href="#" target="_blank">
            <figure>
                <img src="facebook.png" alt="#">
                <figcaption>LEGENDA</figcaption>
            </figure>
        </a>
    </div>
</div>