Align items to the right within a flexbox - html

Question

I am using Bootstrap 4 and this CSS class to vertically align my items:
.vertical-align {
display: flex;
flex-direction: row;
}
.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
display: flex;
align-items: center;
justify-content: flex-start;
}
With this, all this content is aligned to the left. How can I align, for example, the list (ul> li) to the right? Nothing I've tried is working.
Here is a working demo:
.vertical-align {
display: flex;
flex-direction: row;
}
.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
display: flex;
align-items: center;
justify-content: flex-start;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row vertical-align">
<div class="col-md-3" style="background-color: #f1f1f1;">
<div class="logo">
<img src="http://placehold.it/120x50" alt="" class="img-responsive">
</div>
</div>
<div class="col-md-6" style="background-color: #ffccff;">
<div class="catergorias">
<ul class="list-inline categorias_topo">
<li class="list-inline-item">
Categoria 1
</li>
<li class="list-inline-item">
Categoria 2
</li>
<li class="list-inline-item">
Categoria 3
</li>
<li class="list-inline-item">
Categoria 4
</li>
</ul>
</div>
</div>
<div class="col-md-3" style="background-color: #f1f1f1;">
BUSCA
</div>
</div>
</div>
I also have a JSFiddle: https://jsfiddle.net/xcottg08/

Answer 1

You should use justify-content: flex-end; instead of justify-content:flex-start to justify content to the right side.
You must specify it within these rules
.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
However, I would create a new class like .vertical-align-right and one extra class to the container with list (the div above .catergorias with class .col-md-6), thus the code would look as follow:
.vertical-align-right > .list,
justify-content: flex-end;
}