整列項目

Question

：これにより

.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）を右に並べるにはどうすればよいですか？私が試したことは何も働いていません。私もJSFiddleを持って

.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>

：ここ

が動作デモですhttps://jsfiddle.net/xcottg08/

Answer 1

あなたは右側にコンテンツを正当化するためにjustify-content: flex-end;の代わりjustify-content:flex-startを使用する必要があります。

あなたは、私は、リスト（クラス.COL-MD-と.catergorias上記のdivにコンテナに.vertical-align-rightと1つの余分クラスのような新しいクラスを作成し、

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

しかしこれらのルールの中でそれを指定する必要があります。 6）、コードは次のようになります。

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