在 flexbox 中将项目右对齐
Align items to the right within a flexbox
我正在使用 Bootstrap 4 和这个 CSS class 来垂直对齐我的项目:
.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/
您应该使用 justify-content: flex-end;
而不是 justify-content:flex-start
来将内容对齐到右侧。
您必须在这些规则中指定它
.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
但是,我会创建一个新的 class 像 .vertical-align-right
和一个额外的 class 到带有列表的容器(.catergorias 上面的 div 和 class .col-md-6),因此代码如下所示:
.vertical-align-right > .list,
justify-content: flex-end;
}
我正在使用 Bootstrap 4 和这个 CSS class 来垂直对齐我的项目:
.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/
您应该使用 justify-content: flex-end;
而不是 justify-content:flex-start
来将内容对齐到右侧。
您必须在这些规则中指定它
.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
但是,我会创建一个新的 class 像 .vertical-align-right
和一个额外的 class 到带有列表的容器(.catergorias 上面的 div 和 class .col-md-6),因此代码如下所示:
.vertical-align-right > .list,
justify-content: flex-end;
}