Css 将flexbox上的底部与“增长”对齐

我正在尝试使用flexbox创建一个三行布局，它是响应性的（可以有多个三行的列）

第二行（深蓝色框）应自动增长，以适应内部

li

的数量

最下面的一行应该始终与页面底部对齐，这样两列之间的单词Unserved populations就对齐了（可能有更多的列，但两列似乎是一个很好的示例）

我试过各种方法

• 将底部div设置为

  absolute

  和

  bottom:0

  似乎只会使其显示在第二行的顶部
• 设置

  align self

  与端点和基线对齐-它似乎没有任何作用，因此很有可能我用错了

我遇到的麻烦是将“未送达罚款”div与父div的底部对齐

任何帮助都将不胜感激-如果可能的话，我尝试不使用JS，只使用CSS

我在这里上传了一把简化的小提琴

---

我尝试过使用bootstrap，但无法使两个div并排（团队A和团队B）达到相同的大小，因此切换到flexbox来实现这一点。

米奇看一下这个更新的提琴

已编辑以下CSS，以便

.playerNumbers {
  overflow: auto;
  flex:1;
}

.team-container {
  border: 1px solid black;
  flex: 1;
  min-width: 25%;
  display:flex;
  flex-direction:column;
}

我将.team容器作为一个flex元素和列的方向。然后我创建了它的子元素。playersNumber有一个flex:1属性。这告诉它在其同级元素没有与之关联的flex属性时占用所有可用空间。默认情况下，flex属性为flex:0，这意味着它将占用普通元素空间

引自

弯曲

flex属性应用于flex项目。这是一个速记属性 它结合了flex grow、flex shrink和flex basis属性 合并成一份声明。flex grow和flex shrink属性 取一个无单位的值，该值定义每个元素应该有多少空间 按比例相互占据。默认情况下，flex grow为0，并且 flex shrink为1，这意味着所有元素都将成比例 相互之间。flex basis属性定义元素的大小 在分配额外空间之前，其默认值为“自动”

后两个属性是可选的，因此如果我们只应用 声明：1；对于.nav类，它会更改flex grow值 对1。同一flex容器中的另一个flex项是h1元素 使用class.logo，并且由于flex grow默认为0，因此.nav 将始终占据比.logo更多的空间

另一篇关于flexbox的不错的博客文章