如何以不同方式对齐行内的元素答案

【问题标题】：How to align elements inside a row differently如何以不同方式对齐行内的元素
【发布时间】：2021-06-02 06:48:22
【问题描述】：

我有一个容器，其中的子元素应用了 col-md-2 和 col-lg-3 类，并且动态添加了数据。如果有 3 列，我想要做的是在大屏幕上最中间的元素应该居中，并且该特定行的最后一个元素应该对齐到末尾。如果屏幕尺寸中等，那么可能只有 2 列，因此每行的第二个元素应该保持对齐到中间。但在小屏幕上，所有内容都应保持与中心对齐。

这是我尝试过的https://jsfiddle.net/aeshna/w6e54jxg/15/

.list-container {
  min-height: 100px;
}

.el-row-container {
  width: 95%;
}
.el-row-container .el-container {
  width: 410px;
  margin-bottom: 10px;
  padding: 10px;
  display: flex;
  align-items: center;
}
.data {
  position: relative;
  min-width: 291px;
  height: 36px;
  display: inline-block;
  padding: 10px 11px;
  border-radius: 4px;
  font-weight: 400;
  letter-spacing: 0.15px;
  font-size: 14px;
  line-height: 16px;
  background: rgba(0, 0, 0, 0.6);
  }
   @media (min-width: $breakpoint-lg) {
  .align-middle {
    justify-content: center;
  }
  .align-end {
    justify-content: flex-end;
  }
}

<div class="container">
  <div class="col-xs-12 list-container">
    <div class="row el-row-container">
      <div class="el-container  col-md-2 col-lg-3"  ng-repeat="data in els"  ng-class="{'align-middle': $index%3 ===1, 'align-end': $index%3 === 2}">
        <div class="data">1</div>
      </div>
    </div>
  </div>
</div>

基于索引，我为它们分配了 align-middle 和 align-end 类，但有更简单的方法吗？

【问题讨论】：

标签： html css angularjs twitter-bootstrap

【解决方案1】：

如果我理解您的问题，您最好使用align-self css 属性而不是justify-content

这是一个例子：https://jsfiddle.net/bmu0rdoc/3/

但是您的引导程序使用对我来说似乎有点奇怪：当您添加 .col-{breakpoint}-{size} 类时，引导程序试图用 {size} 行填充父级。当您添加固定宽度时，您将破坏此列系统：https://getbootstrap.com/docs/3.4/css/#grid

【讨论】：