在 flexbox 上与 grow 底部对齐

Question

我正在尝试使用响应式 flexbox 创建三行布局（可以有多列三行）。

第二行（深蓝色框）应auto-grow以容纳li里面的数字。

底行应始终与页面底部对齐，以便“未受罚处罚”一词在两列之间对齐（可能会有更多列，但两列似乎是一个很好的示例）。

我尝试过各种方法，

将底部 div 设置为 absolute 和 bottom: 0 所做的一切似乎只是让它显示在第二行的顶部。
将 align-self 设置为结束和基线 - 它似乎没有做任何事情，所以我很可能用错了它

我运行遇到的麻烦是将“未执行的处罚”div 对齐到父 div.

的底部

如有任何帮助，我们将不胜感激 - 我正在尝试尽可能不使用 JS，仅使用 CSS。

我已经在此处上传了一个简化的 fiddle http://jsfiddle.net/zor3pfxw/

我试过使用 bootstrap 但无法使两个 div 并排（A 队和 B 队）大小相同，所以切换到 flexbox 来完成这个。

Answer 1

Mitch 看看这个更新的 fiddle

http://jsfiddle.net/zor3pfxw/57/

将以下CSS编辑为

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

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

我将 .team-container 设为弹性元素和列方向。然后我让它的子元素 .playersNumber 有一个 flex:1 属性。这告诉它在它的兄弟元素没有与之关联的 flex 属性时获取所有可用的 space 。默认情况下，flex 属性是 flex:0，这意味着它将采用普通元素 space

引用自http://blog.teamtreehouse.com/flexbox-next-generation-css-layout-arrived

FLEX

The flex property is applied to flex items. It’s a shorthand property that combines the flex-grow, flex-shrink, and flex-basis properties into one declaration. The flex-grow and flex-shrink properties both take a unitless value that defines how much space each element should take up in proportion to one another. By default, flex-grow is 0 and flex-shrink is 1, meaning that all the elements will be in proportion to one another. The flex-basis property defines the size of elements before extra space is distributed and its default value is auto.

The latter two properties are optional, so if we simply apply the declaration flex: 1; to the .nav class, it changes the flex-grow value to 1. The other flex item in the same flex container is the h1 element with the class .logo, and since flex-grow is 0 by default, the .nav will always take up more space than the .logo.

Flexbox 上的另一个不错的博客 post http://css-tricks.com/snippets/css/a-guide-to-flexbox/

在 flexbox 上与 grow 底部对齐

Bottom align on flexbox with grow

html

css

flexbox