弹性布局应用

自动填充剩余空间

常见布局：当内容区域高度不够的时候，footer 仍然需要固定在底部。这时候，我们可以给 main 使用 flex-grow: 1，使他自动填满剩余空间。

main

header 和 footer 固定高度，main 自动填充剩余空间

父容器宽度

header 和 footer 固定高度，main 自动填充剩余空间

.container {
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
}