Выровнять элементы справа внутри Flexbox

Question

Я использую Bootstrap 4 и этот CSS класс для вертикального выравнивания мои пункты:

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

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

При этом, все это содержимое выравнивается по левому краю. Как можно выровнять, например, список (ul> li) вправо? Ничто из того, что я пробовал, не работает.

Вот рабочий пример:

.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"> 
 
         <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" style="background-color: #f1f1f1;"> 
 
      BUSCA 
 
     </div> 
 
    </div> 
 
</div>

У меня также есть JSFiddle: https://jsfiddle.net/xcottg08/

Answer 1

Вы должны использовать justify-content: flex-end; вместо justify-content:flex-start, чтобы оправдать содержание в правую сторону.

Вы должны указать его в пределах этих правил

.vertical-align > [class^="col-"], 
.vertical-align > [class*=" col-"] { 

Однако, я хотел бы создать новый класс как .vertical-align-right и один дополнительный класс в контейнер со списком (в DIV выше .catergorias с классом .col-MD- 6), таким образом, код будет выглядеть следующим образом:

.vertical-align-right > .list, 
    justify-content: flex-end; 
}