在 flexbox 中将项目向右对齐答案

【问题标题】：Align items to the right within a flexbox在 flexbox 中将项目向右对齐
【发布时间】：2016-09-04 13:22:55
【问题描述】：

我正在使用 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/

【问题讨论】：

标签： html css twitter-bootstrap flexbox twitter-bootstrap-4

【解决方案1】：

您应该使用justify-content: flex-end; 而不是justify-content:flex-start 将内容对齐到右侧。

您必须在这些规则中指定它

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

但是，我会创建一个像 .vertical-align-right 这样的新类和一个额外的类到带有列表的容器（.catergorias 上面的 div 和类 .col-md-6），因此代码如下所示：

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

【讨论】：