我想在弹性框中应用不同的项目对齐方式[重复]答案

【问题标题】：I want to apply different item alignment in flex box [duplicate]我想在弹性框中应用不同的项目对齐方式[重复]
【发布时间】：2021-12-29 12:21:13
【问题描述】：

这是我当前的代码。

.d-flex {
  display:flex;
}

.flex-column {
  flex-direction: column;
}

.align-items-center {
  align-items: center;
}

<div class="d-flex flex-column align-items-center">
  <div>centered content1</div>
  <div>centered content2</div>
  <div>I want to be this content to be left-aligned</div>
  <div>centered content3</div>
  <div>...</div>
</div>

我可以通过将自定义类添加到所需的 div 来解决此问题，但我想仅通过 flex 操作来解决此问题。

这意味着我只想通过使用 Bootstrap flex 类来解决这个问题。

这可能吗？

或者还有其他简单的解决方案吗？

【问题讨论】：

您可以使用 align-self 和 justify-self 属性。 developer.mozilla.org/en-US/docs/Web/CSS/align-self。我认为您可以使用这些类bootstrapshuffle.com/classes/flexbox/align-self-*-center（链接已损坏，*-center 也是其中的一部分）
非常感谢，@arieljuod

标签： html css flexbox

【解决方案1】：

.d-flex {
  display:flex;
}

.flex-column {
  flex-direction: column;
}

.align-items-center {
  align-items: center;
}

<div class="d-flex flex-column align-items-center">
  <div>centered content1</div>
  <div>centered content2</div>
  <div style="align-self: start;">I want to be this content to be left-aligned</div>
  <div>centered content3</div>
  <div>...</div>
</div>

【讨论】：