對齊項目右側的Flexbox的

Question

我使用引導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和一個額外的類的新類的容器列表（以上級.COL-MD-.catergorias股利6），因此代碼看起來如下：

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