Question

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

MockupOfGoal

第二行（深蓝色方框）应自动增长，以容纳内部li的数量。

底行应始终与页面底部对齐，以便在两列之间对齐单词Unserved punties（可能有更多列，但两列似乎是一个很好的样本）。

我尝试过各种各样的事情，

将底部div设置为absolute和bottom: 0所有这些似乎都会导致它显示在第二行的顶部。
将align-self设置为结束和基线 - 它似乎没有做任何事情因此我很有可能使用它错误

我遇到的麻烦是将“Unserved Penalties”div与父div的底部对齐。

任何帮助都会受到赞赏 - 如果可能的话，我试图在不使用JS的情况下尝试这样做，仅使用CSS。

我在这里上传了一个简化的小提琴http://jsfiddle.net/zor3pfxw/

我尝试过使用bootstrap，但无法让它们将两个div并排（Team A和Team B）的大小相同，所以切换到flexbox来实现这一目标。

Answer 1

米奇看看这个更新的小提琴

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创建了一个flex元素和列方向。然后我创建了它的子元素.playersNumber有一个flex：1属性。这告诉它在兄弟元素没有与之关联的flex属性时占用所有可用空间。默认情况下，flex属性为flex：0，表示它将采用普通元素空间

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

FLEX

flex属性应用于弹性项目。这是一个速记属性   它结合了flex-grow，flex-shrink和flex-basis属性   一个声明。柔性生长和挠曲收缩性能   采用无单位值来定义每个元素应该有多少空间   彼此成比例。默认情况下，flex-grow为0和   flex-shrink是1，意味着所有元素都是成比例的   彼此。 flex-basis属性定义元素的大小   在分配额外空间之前，其默认值为auto。

后两个属性是可选的，所以如果我们只是应用了   声明flex：1;到.nav类，它会改变flex-grow值   1.同一个flex容器中的另一个flex项是h1元素   使用类.logo，因为flex-grow默认为0，所以.nav   总是占用比.logo更多的空间。

另一篇关于flexbox http://css-tricks.com/snippets/css/a-guide-to-flexbox/

的博文

底部对齐flexbox与增长

1 个答案: