在flexbox中将项目对齐到右侧(Align items to the right within a flexbox)

我正在使用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/ 
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">
                        <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> 
  
 
 
I also have a JSFiddle: https://jsfiddle.net/xcottg08/
                
最满意答案
                
                    
                        
 你应该使用justify-content: flex-end; 而不是justify-content:flex-start来证明内容是正确的。 
 
 您必须在这些规则中指定它 
 
.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
 
 但是，我会创建一个新的类，如.vertical-align-right和一个额外的类到容器的列表（上面的.catergorias与类.c​​ol-md-6的div），因此代码如下所示： 
 
.vertical-align-right > .list,
   justify-content: flex-end;
}
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;
}