如何将我的文本对齐到 flexbox 中 div 的底部？ [复制]答案

【问题标题】：How to align my text to the bottom in my divs in a flexbox? [duplicate]如何将我的文本对齐到 flexbox 中 div 的底部？ [复制]
【发布时间】：2022-11-23 01:26:37
【问题描述】：

我无法将我的文本与 flex 内容中的 div 底部对齐。我是 CSS 的新手，我们将不胜感激。

谢谢你的时间和善意。

body,
html {
  background-color: #666666;
  box-sizing: border-box;
  font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
  color: #ffffff;
}

.flexTest {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  border: 1px solid #D2D2D2;
  background-color: #000000;
}

.flexTest div {
  background-color: #EB710F;
  padding: 5px;
  margin: 5px;
  height: 50px;
  border: 1px solid #D2D2D2;
  cursor: pointer;
}

<div id="div1" class="flexTest">
  <div>
    Tatactic - Nicolas 1
  </div>
  <div>
    Tatactic - Nicolas 2
  </div>
  <div>
    Tatactic - Nicolas 3
  </div>
  <div>
    Tatactic - Nicolas 4
  </div>
  <div>
    Tatactic - Nicolas 5
  </div>
  <div>
    Tatactic - Nicolas 6
  </div>
  <div>
    Tatactic - Nicolas 7
  </div>
  <div>
    Tatactic - Nicolas 8
  </div>
</div>

【问题讨论】：

标签： html css flexbox vertical-alignment

【解决方案1】：

这似乎很好用

.flexTest div {
    background-color: #EB710F;
    padding: 5px;
    margin: 5px;
    height: 50px;
    border: 1px solid #D2D2D2;
    cursor: pointer;
    display: flex;
    flex-direction: column-reverse;
}

【讨论】：

您应该在此处复制 sn-p 演示并对其进行修改以显示您的解决方案。

【解决方案2】：

您可以使 flex 子容器自己成为 flex 容器。请注意，我已将 CSS 选择器修改为仅针对 .flexTest 的子级。

body,
html {
  background-color: #666666;
  box-sizing: border-box;
  font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
  color: #ffffff;
}

.flexTest {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  border: 1px solid #D2D2D2;
  background-color: #000000;
}

.flexTest > div {
  background-color: #EB710F;
  padding: 5px;
  margin: 5px;
  height: 50px;
  border: 1px solid #D2D2D2;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: end;
}

<div id="div1" class="flexTest">
  <div>
    Tatactic - Nicolas 1
  </div>
  <div>
    Tatactic - Nicolas 2
  </div>
  <div>
    Tatactic - Nicolas 3
  </div>
  <div>
    Tatactic - Nicolas 4
  </div>
  <div>
    Tatactic - Nicolas 5
  </div>
  <div>
    Tatactic - Nicolas 6
  </div>
  <div>
    Tatactic - Nicolas 7
  </div>
  <div>
    Tatactic - Nicolas 8
  </div>
</div>

【讨论】：

【解决方案3】：

我想你想要做的是这个......以及这两个属性

.flexTest div { 
    display: flex;
    align-items: flex-end;
}

【讨论】：