Align items right inside a flexbox

Question

I am using bootstrap 4 and this css class, to align my items vertically:

.vertical-align {
  display: flex;
  flex-direction: row;
}

.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

in my HTML I have the following:

<div class="row vertical-align">
    <div class="col-md-3">
        <div class="logo">
            <img src="assets/img/logo.png" alt="" class="img-responsive">
        </div>
    </div>
    <div class="col-md-6">
        <div class="catergorias">
            <ul class="list-inline categorias_topo">
                <li class="list-inline-item">
                    <a href="#">Categoria 1</a>
                </li>
                <li class="list-inline-item">
                    <a href="#">Categoria 2</a>
                </li>
                <li class="list-inline-item">
                    <a href="#">Categoria 3</a>
                </li>
                <li class="list-inline-item">
                    <a href="#">Categoria 4</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="col-md-3">
        BUSCA
    </div>
</div>

With that, all this content is aligned to the left.

How can I align, for example, this list (ul>li) to the right?

Nothing is working.

Follows print: http://prntscr.com/b23pia

Segue Fiffle:

https://jsfiddle.net/xcottg08/

Answer 1

In your CSS, in the line where Voce put:

justify-content: flex-start;

change to:

justify-content: flex-end;